【Canvas与诗词】《侠客行》节选

于 2024-09-21 13:06:33 发布
阅读量1.3k 收藏 19
点赞数 26
分类专栏： 诗词 文章标签： canvas 诗词
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/river_sun/article/details/142415277
版权

【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>437.侠客行</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>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 高宽
const WIDTH=512;
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){
        //sleep(100);
        window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){
    // 初始化
    this.init=function(){
        
    }

    // 更新
    this.update=function(){    
        
    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    
    }

    // 画前景
    this.paintFg=function(ctx){
        // 底色
        ctx.save();
        ctx.fillStyle = "white";
        ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);
        ctx.restore();

        const R=180;// 基准尺寸

        // 竖向渐变外框
        ctx.save();
        var r=R*1.20;
        var gnt=ctx.createLinearGradient(0,-r,0,r);
        gnt.addColorStop(0,  "rgb(237,198,119)");
        gnt.addColorStop(0.2,"rgb(252,244,172)");
        gnt.addColorStop(0.4,"rgb(147,95,36)");
        gnt.addColorStop(0.5,"rgb(188,138,69)");
        gnt.addColorStop(0.6,"rgb(147,95,36)");
        gnt.addColorStop(0.8,"rgb(252,244,172)");
        gnt.addColorStop(1,  "rgb(237,198,119)");    
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // 上半圈渐变外框
        ctx.save();
        var ro=R*1.16;// outer radius
        var ri=R*1.04;// inner radius
        var gnt=ctx.createLinearGradient(0,-ro,0,0);
        gnt.addColorStop(0,  "rgb(253,247,242)");
        gnt.addColorStop(0.5,"rgb(251,212,125)");
        gnt.addColorStop(0.95,"rgb(245,225,190)");
        gnt.addColorStop(1,  "rgb(76,38,17)");
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.moveTo(ri,0);
        ctx.lineTo(ro,0);
        ctx.arc(0,0,ro,0,-Math.PI,true);
        ctx.lineTo(-ri,0);
        ctx.arc(0,0,ri,-Math.PI,0,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // 下半圈渐变外框
        ctx.save();
        var ro=R*1.16;// outer radius
        var ri=R*1.04;// inner radius
        var gnt=ctx.createLinearGradient(0,0,0,ro);
        gnt.addColorStop(0,  "rgb(76,38,17)");
        gnt.addColorStop(1,"rgb(234,199,133)");
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.moveTo(ri,0);
        ctx.lineTo(ro,0);
        ctx.arc(0,0,ro,0,Math.PI,false);
        ctx.lineTo(-ri,0);
        ctx.arc(0,0,ri,Math.PI,0,true);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // 斜向渐变外框
        ctx.save();
        var r=R*1.04;
        var gnt=ctx.createLinearGradient(-r,-r,r,r);
        gnt.addColorStop(0,  "rgb(186,132,46)");
        gnt.addColorStop(0.5,"rgb(240,232,155)");
        gnt.addColorStop(1,  "rgb(176,118,64)");    
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // 斜向渐变内圈
        ctx.save();
        var r=R*1.00;
        var gnt=ctx.createLinearGradient(-r,-r,r,r);
        gnt.addColorStop(0,  "black");
        gnt.addColorStop(1,  "rgb(47,101,114)");    
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // 斜向渐变内圈
        ctx.save();
        var r=R*0.98;
        ctx.fillStyle="white";
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // slash蒙版
        ctx.save();
        r=R*0.98;
        var gnt=ctx.createLinearGradient(-r,-r,r,r);
        gnt.addColorStop(0,  "rgba(255,255,255,0.25)");
        gnt.addColorStop(0.4,  "rgba(0,0,0,0.95)");
        gnt.addColorStop(0.6,  "rgba(0,0,0,0.95)");
        gnt.addColorStop(1,  "rgba(255,255,255,0.25)");
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // backslash蒙版
        ctx.save();
        r=R*0.98;
        var gnt=ctx.createLinearGradient(r,-r,-r,r);
        gnt.addColorStop(0,  "rgba(255,255,255,0.35)");
        gnt.addColorStop(0.4,  "rgba(0,0,0,0.75)");
        gnt.addColorStop(0.6,  "rgba(0,0,0,0.75)");
        gnt.addColorStop(1,  "rgba(255,255,255,0.35)");
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // 斜向渐变内圈
        ctx.save();
        var r=R*0.96;
        var gnt=ctx.createLinearGradient(-r,-r,r,r);
        gnt.addColorStop(0,  "black");
        gnt.addColorStop(1,  "rgb(47,101,114)");    
        ctx.fillStyle=gnt;
        ctx.beginPath();
        ctx.arc(0,0,r,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();

        // 诗正文
        var r=R*0.96;
        var color="rgb(251,223,159)";
        var sz=R/5.61;
        writeText(ctx,0,-r/4*2.5,"侠客行节选",sz+"32px 方正宋刻本秀楷简体",color);
        var sz=R/11.2;
        writeText(ctx,0,-r/4*2.0,"李白",sz+"16px 方正宋刻本秀楷简体",color);
        // 诗歌正文
        var start=createPt(0,-r/3.5);
        var gap=r/3.5;
        var sz=R/6.6;
        writeText(ctx,start.x,start.y,"赵客缦胡缨 吴钩霜雪明",sz+"px 方正宋刻本秀楷简体",color);
        writeText(ctx,start.x,start.y+gap,"银鞍照白马 飒沓如流星",sz+"px 方正宋刻本秀楷简体",color);
        writeText(ctx,start.x,start.y+2*gap, "十步杀一人 千里不留行",sz+"px 方正宋刻本秀楷简体",color);
        writeText(ctx,start.x,start.y+3*gap,"事了拂衣去 深藏身与名",sz+"px 方正宋刻本秀楷简体",color);

        writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权
    }
}


/*----------------------------------------------------------
函数:用于绘制实心圆,用途是标记点以辅助作图
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
color:填充圆的颜色
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,color){
    ctx.fillStyle=color;
    ctx.beginPath();
    ctx.arc(x,y,r,0,Math.PI*2,false);
    ctx.closePath();
    ctx.fill();
}

/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){
    var retval={};
    retval.x=x;
    retval.y=y;
    return retval;
}

/*----------------------------------------------------------
函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {
    const date = Date.now();
    let currDate = null;
    while (currDate - date < milliSeconds) {
        currDate = Date.now();
    } 
}

/*----------------------------------------------------------
函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){
    ctx.save();
    ctx.textBaseline="bottom";
    ctx.textAlign="center";
    ctx.font = font;
    ctx.fillStyle=color;
    ctx.fillText(text,x,y);
    ctx.restore();
}

/*-------------------------------------------------------------
侠客行
唐·李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
--------------------------------------------------------------*/
//-->
</script>

END

普兰店拉马努金
关注
专栏目录
CANVAS游戏开发与实战
07-23
资源名称：CANVAS游戏开发与实战 资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
Canvas与Image互相转换示例代码
12-13
JS Canvas与Image互相转换 原文演示: JavaScript Canvas Image Conversion Demo在上周的Mozilla Web开发 会议,最后我们花了大半天的时间讨论未来的Mozilla市场应用。Instagram是近期最火爆的移动应用,以10亿美元的...
JavaScript canvas绘制圆弧与圆形
01-19
本文实例为大家分享了canvas绘制圆弧与圆形的具体代码，供大家参考，具体内容如下 canvas 绘制圆弧 绘制圆弧使用 context.arc( ) 函数，包含六个参数。 context.arc( centerx,centery,radius, startingAngle,...
Canvas与图片压缩的示例代码
09-27
### Canvas与图片压缩的知识点详解 #### Canvas的基本概念 Canvas是HTML5中一种新的元素，它提供了一块画布（canvas）供脚本语言（通常为JavaScript）进行图形操作。它允许开发者通过JavaScript中的API在网页上绘制...
逆变器PQ控制模型、逆变器并网模型（Simulink） 直流侧电压650V～2000V均可 交流测电压为380V 有功功率和无功
10-10
逆变器PQ控制模型、逆变器并网模型（Simulink） 直流侧电压650V～2000V均可 交流测电压为380V 有功功率和无功功率可达10kW或10kVar，甚至更高
SpringBoot+Vue工厂生产设备维护管理系统答辩PPT.ppt
10-10
计算机毕业设计答辩PPT
CPA 税法 马兆瑞 基础班 第10章-本章概述-PPT-8页.pdf
10-10
CPA 税法 马兆瑞 基础班 第10章-本章概述-PPT-8页.pdf
CCS软件之工程模板的创建
10-10
工程模板创建的基础文件
nmpc非线性模型预测控制从原理到代码实践 含4个案例 自动泊车轨迹优化； 倒立摆上翻控制； 车辆运动学轨迹跟踪； 四旋翼无人机
10-10
nmpc非线性模型预测控制从原理到代码实践 含4个案例 自动泊车轨迹优化； 倒立摆上翻控制； 车辆运动学轨迹跟踪； 四旋翼无人机轨迹跟踪。
SpringBoot+Vue多媒体素材管理系统答辩PPT.pptx
10-10
计算机毕业设计答辩PPT
cmake-3.30.1-windows-arm64.msi win11 on arm 通过cmake编译&运行C++代码
10-10
cmake-3.30.1-windows-arm64.msi 安装完毕后一定要设置环境变量。 可以参考：https://blog.csdn.net/feng8403000/article/details/142767555
基于BOSS直聘数据分析师职位信息的爬虫实现、数据分析、数据可视化和机器学习预测的综合性项目python源码.zip
最新发布
10-10
基于BOSS直聘数据分析师职位信息的爬虫实现、数据分析、数据可视化和机器学习预测的综合性项目python源码.zip
图像处理之直方图均衡化与CLAHE技术详解及Python代码实现（包含详细的完整的程序和数据）
10-10
内容概要：本文详细介绍并提供了如何使用 OpenCV-Python 在不同颜色空间下进行直方图均衡化（Histogram Equalization）以及自适应直方图均衡化（Adaptive Histogram Equalization, AHAE 或称为 Contrast Limited Adaptive Histogram Equalization, CLAHE）的实际应用示例，从原理出发，对比这两种方法的效果及其特点。 适合人群：有一定 Python 编程能力并对 OpenCV 具有基本认知的开发者和研究人员。 使用场景及目标：可用于改善数字影像质量的应用场合，在医疗、安防监测、遥感分析等多种视觉任务中有广泛的用途。 其他说明：本文除了介绍两种主要的直方图均衡化技术外，还讨论了如何针对彩色图像在 HSV 和 YUV 等色彩模型中进行优化操作，并给出完整的源代码，便于读者上手试验。此外，提示使用者注意在特定环境下使用时可能出现的弊端以及未来的研究方向。
CPA 《税法》 马兆瑞 教材精讲 第十一章印花税法和企业所得税法 第一段.pdf
10-10
CPA 《税法》 马兆瑞 教材精讲 第十一章印花税法和企业所得税法 第一段.pdf
Python实现循环链表数据结构（包含详细的完整的程序和数据）
10-10
本文详细介绍了循环链表这一数据结构的两种形式—循环单链表与循环双链表的具体实现方法，并给出了具体的操作实例。内容涉及节点的添加与删除，查找元素等功能以及如何计算列表的长度。 适合人群：具有Python基础知识并对数据结构有一定兴趣的学习者与程序员。 使用场景及目标：适用于约瑟夫问题，循环队列等问题，通过学习能够更好地理解和运用这类结构来优化程序。 其他说明：强调正确的指针管理与合理的错误检查对于防止运行时发生故障（如内存泄漏和断开链表）是非常重要的，并提出可能进一步提升性能的方向。
Django+Vue公务员考试信息管理系统答辩PPT.ppt
10-10
计算机毕业设计答辩PPT
python 程序 截图工具
10-10
python 程序 截图工具
基于yolov9实现的打电话、玩手机检测系统python源码+详细运行教程+训练好的模型+评估指标曲线.zip
10-10
【使用教程】 一、环境配置 1、建议下载anaconda和pycharm 在anaconda中配置好环境，然后直接导入到pycharm中，在pycharm中运行项目 anaconda和pycharm安装及环境配置参考网上博客，有很多博主介绍 2、在anacodna中安装requirements.txt中的软件包 命令为：pip install -r requirements.txt 或者改成清华源后再执行以上命令，这样安装要快一些 软件包都安装成功后才算成功 3、安装好软件包后，把anaconda中对应的python导入到pycharm中即可（不难，参考网上博客） 二、环境配置好后，开始训练（也可以训练自己数据集） 1、数据集准备 需要准备yolo格式的目标检测数据集，如果不清楚yolo数据集格式，或者有其他数据训练需求，请看博主yolo格式各种数据集集合链接：https://blog.csdn.net/DeepLearning_/article/details/127276492 里面涵盖了上百种yolo数据集，且在不断更新，基本都是实际项目使用。来自于网上收集、实际场景采集制作等，自己使用labelimg标注工具标注的。数据集质量绝对有保证！ 本项目所使用的数据集，见csdn该资源下载页面中的介绍栏，里面有对应的下载链接，下载后可直接使用。 2、数据准备好，开始修改配置文件 参考代码中data文件夹下的banana_ripe.yaml，可以自己新建一个不同名称的yaml文件 train：训练集的图片路径 val：验证集的图片路径 names: 0: very-ripe 类别1 1: immature 类别2 2: mid-ripe 类别3 格式按照banana_ripe.yaml照葫芦画瓢就行，不需要过多参考网上的 3、修改train_dual.py中的配置参数，开始训练模型 方式一： 修改点： a.--weights参数，填入'yolov9-s.pt'，博主训练的是yolov9-s，根据自己需求可自定义 b.--cfg参数，填入 models/detect/yolov9-c.yaml c.--data参数，填入data/banana_ripe.yaml，可自定义自己的yaml路径 d.--hyp参数，填入hyp.scratch-high.yaml e.--epochs参数，填入100或者200都行，根据自己的数据集可改 f.--batch-size参数，根据自己的电脑性能（显存大小）自定义修改 g.--device参数，一张显卡的话，就填0。没显卡，使用cpu训练，就填cpu h.--close-mosaic参数，填入15 以上修改好，直接pycharm中运行train_dual.py开始训练 方式二： 命令行方式，在pycharm中的终端窗口输入如下命令，可根据自己情况修改参数 官方示例：python train_dual.py --workers 8 --device 0 --batch 16 --data data/coco.yaml --img 640 --cfg models/detect/yolov9-c.yaml --weights '' --name yolov9-c --hyp hyp.scratch-high.yaml --min-items 0 --epochs 500 --close-mosaic 15 训练完会在runs/train文件下生成对应的训练文件及模型，后续测试可以拿来用。 三、测试 1、训练完，测试 修改detect_dual.py中的参数 --weights，改成上面训练得到的best.pt对应的路径 --source，需要测试的数据图片存放的位置，代码中的test_imgs --conf-thres，置信度阈值，自定义修改 --iou-thres，iou阈值，自定义修改 其他默认即可 pycharm中运行detect_dual.py 在runs/detect文件夹下存放检测结果图片或者视频 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。
SpringBoot+Vue班级综合测评管理系统答辩PPT.pptx
10-10
计算机毕业设计答辩PPT
HTML5 Canvas与JavaScript实现图像操作
此外，还提到了FileReader和canvas的结合使用，以便读取和处理本地图像文件。" 在JavaScript中，HTML5的canvas元素提供了丰富的API，使得我们可以直接在网页上绘制图形、处理图像。这些API包括但不限于`context....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值