【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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/310305.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FireProx:一款功能强大的AWS API网关管理与IP地址轮换代理工具

关于FireProx FireProx是一款功能强大的AWS API网关安全管理工具&#xff0c;该工具可以帮助广大研究人员创建实现唯一IP地址轮换的实时HTTP转发代理。 在发送网络请求或进行网络交互时&#xff0c;实现源IP地址轮换是一个非常复杂的过程&#xff0c;虽然社区中也有相关的工具…

【爬虫开发】爬虫从0到1全知识md笔记第5篇:Selenium课程概要,selenium的其它使用方法【附代码文档】

爬虫开发从0到1全知识教程完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;爬虫课程概要&#xff0c;爬虫基础爬虫概述,,http协议复习。requests模块&#xff0c;requests模块1. requests模块介绍,2. response响应对象,3. requests模块发送请求,4. request…

JVM 垃圾收集器

JVM 垃圾收集器 垃圾收集器 垃圾收集器 Serial (串行)&#xff1a;单线程垃圾回收器&#xff1b;采用复制算法 Serial Old&#xff1a;Serial 收集器的老年代版本&#xff0c;采用标记-整理算法。 ParNew&#xff1a;多线程的垃圾回收器&#xff08;Serial 的多线程版本&#x…

Springboot+Vue项目-基于Java+Mysql的网上订餐系统(附源码+LW+演示录像)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

MySQL 快问快答

我写这篇文章的目的只有一个&#xff1a;通过这些问题来帮助我去将我脑子里的MySQL脑图给巩固熟悉&#xff0c;通过回答这些问题&#xff0c;让我对脑子里的MySQL知识有更深的印象&#xff0c;当什么时候我的MySQL脑图不熟的时候&#xff0c;我就可以拿这篇文章来去巩固一下&am…

【VUE】Vue3自由拖拽标签

效果&#xff1a; 代码&#xff1a; <template> <div><div v-move class"box"><label class"move">拽我</label> </div> </div> </template> <script setup lang"ts">import { ref, …

【Linux C | 多线程编程】线程同步 | 互斥量(互斥锁)介绍和使用

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a; 本文未经允许…

【详解算法流程+程序】DBSCAN基于密度的聚类算法+源码-用K-means和DBSCAN算法对银行数据进行聚类并完成用户画像数据分析课设源码资料包

DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一个比较有代表性的基于密度的聚类算法。 与划分和层次聚类方法不同&#xff0c;它将簇定义为密度相连的点的最大集合&#xff0c;能够把具有足够高密度的区域划分为簇&#xff0c; 并可在噪声的空间数据…

占显存类代码随手丢垃圾习惯的重要性

def calculate_similarity(model, image_1, image_2, drawFalse):image_1_pil Image.fromarray(image_1)image_2_pil Image.fromarray(image_2)probability model.detect_image(image_1_pil, image_2_pil, draw)每次跑完显存代码都释放显存torch.cuda.empty_cache()return p…

【Entity Framework】你要知道EF中功能序列与值转换

【Entity Framework】你要知道EF中功能序列与值转换 文章目录 【Entity Framework】你要知道EF中功能序列与值转换一、序列1.1 基本用法1.2 配置序列设置 二、值转换2.1 配置值转换器2.2 批量配置值转换器2.3 预定义的转换2.4 ValueConverter类2.5 内置转换器 三、应用3.1 简单…

顶顶通呼叫中心中间件-SIP分机安全(mod_cti基于FreeSWITCH)

介绍 运行在公网的FreeSWITCH服务器&#xff0c;每天都会接收到很多恶意的呼叫请求和注册请求&#xff0c;尝试盗打电话。合理的配置可以防止电话给倒打&#xff0c;但是每天大量的攻击&#xff0c;会让FS产生很多日志&#xff0c;降低FreeSWITCH的处理能力&#xff0c;cti模块…

计算机网络常见面试总结

文章目录 1. 计算机网络基础1.1 网络分层模型1. OSI 七层模型是什么&#xff1f;每一层的作用是什么&#xff1f;2.TCP/IP 四层模型是什么&#xff1f;每一层的作用是什么&#xff1f;3. 为什么网络要分层&#xff1f; 1.2 常见网络协议1. 应用层有哪些常见的协议&#xff1f;2…

开源免费的多功能PDF工具箱

它支持修改PDF、编辑PDF书签、导出PDF书签、导入书签、生成、合并、拆分、提取页面内容、提取图片、OCR 功能介绍: 修改PDF信息&#xff1a;修改文档属性、页码编号、页面链接、页面尺寸&#xff1b;删除自动打开网页等动作&#xff0c;去除复制及打印限制&#xff1b;设置阅读…

半导体材料(一)

本篇为西安交通大学本科课程《电气材料基础》的笔记。 本篇为这一单元的第一篇笔记&#xff0c;下一篇传送门。 半导体是导电能力介于均属导体和绝缘体之间的固体材料。 半导体基本特征 室温下其电阻数量级约为 1 0 − 6 ∼ 1 0 8 Ω ⋅ m 10^{-6}\sim10^{8}\mathrm{\Omega…

C++项目——集群聊天服务器项目(十四)客户端业务

大家好~前段时间有些事情需要处理&#xff0c;没来得及更新&#xff0c;实在不好意思。 今天来继续更新集群聊天服务器项目的客户端功能&#xff0c;主要实现客户端业务&#xff0c;包括添加好友、点对点聊天、创建群组、添加群组、群组聊天业务&#xff0c;接下来我们一起来敲…

基于velero和minio实现k8s数据的备份

1.30部署minio rootk8s-harbor:/etc/kubeasz/clusters/k8s-cluster1# docker run \ -d --restartalways -p 9000:9000 -p 9090:9090 –name minio -v /data/minio/data:/data -e “MINIO_ROOT_USERadmin” -e “MINIO_ROOT_PASSWORD12345678” quay.io/minio/minio server…

什么是工业级物联网智能网关?如何远程控制PLC?

在数字化浪潮席卷全球的今天&#xff0c;工业物联网&#xff08;IIoT&#xff09;已经成为推动工业转型升级的关键力量。而在工业物联网的大家庭中&#xff0c;工业级物联网智能网关扮演着举足轻重的角色。那么&#xff0c;究竟什么是工业级物联网智能网关&#xff1f;又该如何…

五、流程控制之循环

目录 5.1 步进循环语句for 5.1.1 带列表的for循环语句 5.1.2 不带列表的for循环语句 5.1.3 类C风格的for循环语句 5.2 while循环语句 5.2.1 while循环读取文件 5.2.2 while循环语句示例 5.3 until循环语句 5.4 select循环语句 5.5 嵌套循环 5.1 步进循环语句for for…

linux安装和使用-第一天

一. 安装linux系统 安装过程:略注意事项: 安装时一定一定一定不要选择有中文的目录包括镜像文件所在的目录,否则会发生各种问题,比如VMware Tools是灰色的.1. 安装ssh工具 (1) 安装命令 # 第一次安装系统需要更新一下apt的源,他维护了软件依赖关系,否则安装不了软件,每次安装…

Python数据容器(一)

一.数据容器入门 1.Python中的数据容器&#xff1a;一种可以容纳多份数据的数据类型&#xff0c;容纳的每一份数据称之为1个元素&#xff0c;每一个元素&#xff0c;可以是任意类型的数据&#xff0c;如字符串、数字、布尔等。 2.数据容器根据特点的不同&#xff0c;如&#…