【Canvas技法】蓝底金字北岛诗节选（径向渐变色、文字阴影示例）
【效果图】
【代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>北岛诗选</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body οnlοad="init();"><div class="centerlize"><canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.</canvas><img id="myImg" src="125.png" style="display:none;"/></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 高宽
const WIDTH=312;
const HEIGHT=512;// 舞台对象
var stage;//-------------------------------
// 初始化
//-------------------------------
function init(){// 获得canvas对象var canvas=document.getElementById('myCanvas'); canvas.width=WIDTH;canvas.height=HEIGHT;// 初始化canvas的绘图环境ctx=canvas.getContext('2d'); ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移到画布中央// 准备stage=new Stage(); stage.init();// 开幕animate();
}// 播放动画
function animate(){ stage.update(); stage.paintBg(ctx);stage.paintFg(ctx); // 循环if(true){window.requestAnimationFrame(animate); }
}// 舞台类
function Stage(){// 初始化this.init=function(){}// 更新this.update=function(){}// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏 // 底色var lgrd=ctx.createLinearGradient(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);lgrd.addColorStop(0,"rgb(0,117,205)");lgrd.addColorStop(1,"rgb(2,54,137)");ctx.fillStyle=lgrd;ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);ctx.save();ctx.textBaseline="bottom"; ctx.font = "18px 宋体";ctx.fillStyle="white";ctx.textAlign="center";ctx.fillText("《结局或开始--献给遇罗克》节选",-9,-190);ctx.save();ctx.shadowColor = 'black';ctx.shadowOffsetX = 2;ctx.shadowOffsetY = 2;ctx.shadowBlur = 5;ctx.textAlign="left";ctx.font = "36px 仿宋";ctx.fillStyle="rgb(255,245,179)";var arr=["以太阳的名义","黑暗公开地掠夺","沉默依然","是东方的故事","人民","在古老的壁画上","默默地永生","默默地死去",];for(var i=0;i<arr.length;i++){ctx.fillText(arr[i],-124,i*40-120);}ctx.restore();ctx.textBaseline="bottom"; ctx.font = "18px 宋体";ctx.fillStyle="white";ctx.textAlign="right";ctx.fillText("作者：北岛",120,210);ctx.restore();// 版权ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = "8px consolas";ctx.fillStyle="white";ctx.fillText("逆火原创",WIDTH/2-40,HEIGHT/2-10);}// 画前景this.paintFg=function(ctx){}
}/*--------------------------------------------------
老鼠偷了人类的大米，人们说它狡猾；
人类偷了蜜蜂的蜂蜜，却说它很勤劳。
---------------------------------------------------*/
//-->
</script>
END
相关文章：
【Canvas技法】蓝底金字北岛诗节选（径向渐变色、文字阴影示例）
【效果图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>北岛诗选</title><style type"text/css">.c…...
【大语言模型】基础：TF-IDF
TF-IDF (Term Frequency-Inverse Document Frequency) 是一种用于信息检索与文本挖掘的统计方法，用来评估一个词对于一个文件集或一个语料库中的其中一份文件的重要性。它是一种常用于文本处理和自然语言处理的权重计算技术。 原理 TF-IDF 由两部分组成࿱…...
[开发日志系列]PDF图书在线系统20240415
20240414 Step1: 创建基础vueelment项目框架[耗时: 1h25min(8:45-10:10)] 检查node > 升级至最新 (考虑到时间问题,没有使用npm命令行执行,而是觉得删除重新下载最新版本) > > 配置vue3框架 取名:Online PDF Book System 遇到的报错: 第一报错: npm ERR! …...
蓝桥杯 — — 纯质数
纯质数 题目： 思路： 一个最简单的思路就是枚举出所有的质数，然后再判断这个质数是否是一个纯质数。 枚举出所有的质数： 可以使用常规的暴力求解法，其时间复杂度为（ O ( N N ) O(N\sqrt{N}) O(NN )&…...
OpenCV基本图像处理操作（三）——图像轮廓
轮廓 cv2.findContours(img,mode,method) mode:轮廓检索模式 RETR_EXTERNAL ：只检索最外面的轮廓；RETR_LIST：检索所有的轮廓，并将其保存到一条链表当中；RETR_CCOMP：检索所有的轮廓，并将他们组…...
比特币突然暴跌
作者：秦晋 周末愉快。 今天给大家分享两则比特币新闻，也是两个数据。一则是因为中东地缘政治升温，传统资本市场的风险情绪蔓延至加密市场，引发加密市场暴跌。比特币跌至66000美元下方。杠杆清算金额高达8.5亿美元。 二则是&#x…...
使用SpeechRecognition和vosk处理ASR
SpeechRecognition可以支持多种模型语音转文字，感觉vosk还不错，使用起来也简单一些；百度也有PaddleSpeech，但是安装起来太麻烦，不是这个库版本不对就是那个库有问题，用起来不方便； 安装SpeechR…...
【Go】通道：缓冲通道和非缓冲通道
目录 通道的基本概念 缓冲通道 非缓冲通道 总结 通道的基本概念 在Go语言中，通道是一种特殊的类型，用于在goroutine之间传递数据。你可以将通道想象为数据的传输管道。通道分为两种类型： 非缓冲通道（Unbuffered Channels&…...
Java中数组的使用
在Java编程中，数组是一种非常重要的数据结构，它允许我们存储相同类型的多个元素。对于初学者来说，理解数组的基本概念、初始化、遍历、默认值以及内存分配和使用注意事项是非常关键的。 一、数组的概念 数组是一个可以容纳多个相同类型数据…...
CAP5_Monday
A Set to Max (Easy Version) 给定数组 a 和 b，可以执行以下操作任意次 : 让 a l ∼ a r a_l\sim a_r al∼ar 中的所有所有元素变成 a i a_i ai ( l ≤ i ≤ r ) (l\leq i\leq r) (l≤i≤r)， 其中 1 ≤ l ≤ r ≤ n 1\leq l \leq r \leq n 1≤…...
科大讯飞星火开源大模型iFlytekSpark-13B GPU版部署方法
星火大模型的主页：iFlytekSpark-13B: 讯飞星火开源-13B（iFlytekSpark-13B）拥有130亿参数，新一代认知大模型，一经发布，众多科研院所和高校便期待科大讯飞能够开源。 为了让大家使用的更加方便，科…...
SpringBoot基于RabbitMQ实现消息延迟队列方案
知识小科普 在此之前，简单说明下基于RabbitMQ实现延时队列的相关知识及说明下延时队列的使用场景。 延时队列使用场景 在很多的业务场景中，延时队列可以实现很多功能，此类业务中，一般上是非实时的，需要延迟处理的&a…...
Go语言使用标准库时常见错误
Go的标准库是一组增加和拓展语言的核心包。然而，很容易误用标准库，或者我们对其行为理解有限，导致产生了bug或不应该在生产级应用程序中某些功能。 1. 提供错误的持续时间 标准库提供了获取 time.Duration 的常用函数和方法，但由于 time.Duration 是 int64 的自定义类型，…...
UE5不打包启用像素流 ubuntu22.04
首先查找引擎中像素流的位置： zkzk-ubuntu2023:/media/zk/Data/Linux_Unreal_Engine_5.3.2$ sudo find ./ -name get_ps_servers.sh [sudo] zk 的密码： ./Engine/Plugins/Media/PixelStreaming/Resources/WebServers/get_ps_servers.sh然后在指定路径中…...
Redis 常用数据类型常用命令和应用场景
首先先混个眼熟 Redis 中的 8 种常用数据类型： 5 种基础数据类型：String（字符串）、List（列表）、Set（集合）、Hash（散列）、Zset（有序集合࿰…...
ins视频批量下载，instagram批量爬取视频信息
简介 Instagram 是目前最热门的社交媒体平台之一,拥有大量优质的视频内容。但是要逐一下载这些视频往往非常耗时。在这篇文章中,我们将介绍如何使用 Python 编写一个脚本,来实现 Instagram 视频的批量下载和信息爬取。 我们使用selenium获取目标用户的 HTML 源代码,并将其保存…...
)
Canvas图形编辑器-数据结构与History(undo/redo)
Canvas图形编辑器-数据结构与History(undo/redo) 这是作为 社区老给我推Canvas，于是我也学习Canvas做了个简历编辑器 的后续内容，主要是介绍了对数据结构的设计以及History能力的实现。 在线编辑: https://windrunnermax.github.io/CanvasEditor开源地…...
阿里云Centos7下编译glibc
编译glibc 原来glibc版本 编译前需要的环境: CentOS7 gcc 8.3.0 gdb 8.3.0 make 4.0 binutils 2.39 (ld -v) python 3.6.8 其他看INSTALL, 但有些版本也不易太高 wget https://mirrors.aliyun.com/gnu/glibc/glibc-2.37.tar.gz tar -zxf glibc-2.37.tar.gz cd glibc-2.37/ …...
UE5数字孪生系列笔记(四)
场景的切换 创建一个按钮的用户界面UMG 创建一个Actor，然后将此按钮UMG添加到组件Actor中 调节几个全屏的背景 运行结果 目标点切换功能制作 设置角色到这个按钮的位置效果 按钮被点击就进行跳转 多个地点的切换与旋转 将之前的目标点切换逻辑替换成旋转的逻…...
品牌故事化：Kompas.ai如何塑造深刻的品牌形象
在这个信息爆炸的时代，品牌故事化已经成为企业塑造独特形象、与消费者建立情感联系的重要手段。一个引人入胜的品牌故事不仅能够吸引消费者的注意力，还能够在消费者心中留下持久的印象，建立起强烈的情感连接。本文将深入探讨品牌故事化对于构…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的，根据Excel列的需求预估的工时直接打骨折，不要问我为什么，主要…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案，允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...
相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...