【Canvas与诗词】秋夕.杜牧(银烛秋光冷画屏......)

于 2024-09-28 21:23:58 发布
阅读量935 收藏 15
点赞数 17
分类专栏： 诗词 文章标签： canvas 诗词
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/River_Sun/article/details/142621997
版权

【成图】

【代码】

<!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>
        </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=210;// 基准尺寸

        // 最外边
        ctx.save();        
        ctx.shadowOffsetY=8; // 设置阴影
        ctx.shadowColor="grey";
        ctx.shadowBlur=6;
        var r=R*1.00;
        var gnt=ctx.createLinearGradient(0,-r,0,r);// 渐变色
        gnt.addColorStop(0,"rgb(252,244,172)");
        gnt.addColorStop(1,"rgb(147,95,36)");
        ctx.fillStyle=gnt;
        drawRoundSixPolygon(ctx,0,0,r,10);
        ctx.fill();
        ctx.restore();

        // 内平边
        ctx.save();        
        var r=R*0.98;
        var gnt=ctx.createLinearGradient(0,-r,0,r);// 渐变色
        gnt.addColorStop(0,  "rgb(253,247,242)");
        gnt.addColorStop(0.25,"rgb(251,212,125)");
        gnt.addColorStop(0.50,"rgb(245,225,190)");
        gnt.addColorStop(0.65,  "rgb(76,38,17)");
        gnt.addColorStop(0.66,  "rgb(76,38,17)");
        gnt.addColorStop(1,"rgb(234,199,133)");
        ctx.fillStyle=gnt;
        drawRoundSixPolygon(ctx,0,0,r,10);
        ctx.fill();
        ctx.restore();

        // 内凹边
        ctx.save();        
        var r=R*0.92;
        var gnt=ctx.createLinearGradient(0,-r,0,r);// 渐变色
        gnt.addColorStop(0,"rgb(147,95,36)");
        gnt.addColorStop(1,"rgb(252,244,172)");    
        ctx.fillStyle=gnt;
        drawRoundSixPolygon(ctx,0,0,r,10);
        ctx.fill();
        ctx.restore();

        // 白底
        ctx.save();
        var r=R*0.90;
        ctx.fillStyle="white";
        drawRoundSixPolygon(ctx,0,0,r,10);
        ctx.fill();
        ctx.restore();

        // slash蒙版
        ctx.save();
        r=R*0.90;
        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;
        drawRoundSixPolygon(ctx,0,0,r,10);
        ctx.fill();
        ctx.restore();

        // backslash蒙版
        ctx.save();
        r=R*0.90;
        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;
        drawRoundSixPolygon(ctx,0,0,r,10);
        ctx.fill();
        ctx.restore();
        
        // 绿黑渐变底
        ctx.save();        
        var r=R*0.88;
        var gnt=ctx.createLinearGradient(0,-r,0,r);        
        gnt.addColorStop(0,  "rgb(47,101,114)");    
        gnt.addColorStop(1,  "rgb(23,23,23)");
        ctx.fillStyle=gnt;
        //drawRoundSixPolygon(ctx,0,0,r,10);
        drawPolygon(ctx,6,0,0,r);
        ctx.fill();
        ctx.restore();

        // 诗正文
        var r=R*0.88;
        var color="rgb(251,223,159)";
        var sz=R/5.61;
        writeText(ctx,0,-r/4*2.5,"秋夕",sz+"px 方正宋刻本秀楷简体",color);
        var sz=R/12.2;
        writeText(ctx,0,-r/4*2.0,"杜牧",sz+"px 方正宋刻本秀楷简体",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);

        // 玻璃光
        ctx.save();        
        var r=R*0.88;

        var a=createPt(-r*Math.sqrt(3)/2,-r/4);// 定位点
        var b=createPt(0,-r*3/4);
        var c=createPt(+r*Math.sqrt(3)/2,-r/4);
        var angle=-Math.PI/6;
        var d=createPt(r*Math.cos(angle),r*Math.sin(angle));
        angle=-Math.PI/2;
        var e=createPt(r*Math.cos(angle),r*Math.sin(angle));
        angle=-Math.PI/6*5;
        var f=createPt(r*Math.cos(angle),r*Math.sin(angle));

        ctx.fillStyle="rgba(190,190,190,0.1)"; // 填充半透明色
        ctx.beginPath();
        ctx.moveTo(a.x,a.y);
        ctx.quadraticCurveTo(b.x,b.y,c.x,c.y);
        ctx.lineTo(d.x,d.y);
        ctx.lineTo(e.x,e.y);
        ctx.lineTo(f.x,f.y);
        ctx.closePath();
        ctx.fill();

        ctx.restore();

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

/*----------------------------------------------------------
函数:绘制正多边形
n:正多边形的边数
x:正多边形中心的横坐标
y:正多边形中心的纵坐标
r:正多边形中心到顶点的距离
----------------------------------------------------------*/
function drawPolygon(ctx,n,x,y,r){
    var polyArr=[];
    for(var i=0;i<n;i++){
        var theta=Math.PI*2/n*i+Math.PI/6;
        var pt={};
        pt.x=r*Math.cos(theta)+x;
        pt.y=r*Math.sin(theta)+y;
        polyArr.push(pt);
    }

    ctx.beginPath();
    for(let i=0;i<polyArr.length;i++){
        ctx.lineTo(polyArr[i].x,polyArr[i].y);
    }
    ctx.closePath();
}

/*----------------------------------------------------------
函数:用于绘制圆角六边形
ctx:绘图上下文
x:六边形中心横坐标
y:六边形中心纵坐标
R:六边形半径
r:圆角半径
----------------------------------------------------------*/
function drawRoundSixPolygon(ctx,x,y,R,r){
    // 取点
    const N=6;// 六边形边数
    const ROUND=r;// 圆角半径
    
    var arr=[];// 放顶点三点的数组
    for(var i=0;i<N;i++){
        var theta=Math.PI*2/N*i-Math.PI/6;

        var r=R;
        var a=createPt(x+r*Math.cos(theta),y+r*Math.sin(theta));

        r=ROUND/Math.sqrt(3);
        var angle=theta+Math.PI/3*2;
        var c=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));

        r=ROUND/Math.sqrt(3);
        angle=theta-Math.PI/3*2;
        var b=createPt(a.x+r*Math.cos(angle),a.y+r*Math.sin(angle));

        var arrInner=[b,a,c];
        arr.push(arrInner);
    }

    // 绘图
    ctx.save();
    ctx.beginPath();
    for(var i=0;i<arr.length;i++){
        var b=arr[i][0];
        var a=arr[i][1];
        var c=arr[i][2];

        ctx.lineTo(b.x,b.y);
        ctx.quadraticCurveTo(a.x,a.y,c.x,c.y);
        ctx.lineTo(c.x,c.y);
    }
    ctx.closePath();
    ctx.restore();
}


/*----------------------------------------------------------
函数:用于绘制实心圆,用途是标记点以辅助作图
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

普兰店拉马努金
关注
专栏目录
fabric.js画图（canvas画图 2d画图）相关
u014788505的博客
02-13 1万+
<template> <div style="position: relative"> <canvas id="canvas"></canvas> <img id="expImg" :src="imgUrl" style="display: none" /> <span id="areaA">A</span> <span id="areaB">B</span> .
html5+exif.js+canvas
09-22
实现手机端照片上传预览、压缩、旋转功能。 //获取照片方向角属性，用户旋转控制 EXIF.getData(file, function() { // alert(EXIF.pretty(this));... base64 = canvas.toDataURL("image/jpeg", 0.8);
System.Drawing.Common.Bitmap 跨平台的替代方案
csdn_aspnet的专栏
01-25 1万+
在这个例子中，我们创建了一个 640x480 的画布，并通过 `SKSurface` 的静态 `Create` 方法创建了一个用于绘图的表面。它是对Google Skia图形库的C#/.NET封装，提供了一套易于使用的API，可以用于创建图像、绘制文本、进行图形变换等操作。最后，我们使用 `surface.Snapshot` 将画布中的内容保存为一个图像，并使用 `image.Encode` 将图像编码为 PNG 格式。我们使用 `SKPaint` 来创建一个画笔，指定了颜色和样式。
99 Three.js使用canvas更新纹理
现在学习也不晚
05-10 7204
案例查看地址： 简介 Three.js可以直接将canvas画布上的图像作为纹理绘制到模型上面。下面我们说一下如何实现 案例实现 首先，我们创建了一个canvas对象，并使用js在上面循环绘制图像。在上面绘制了一个火在燃烧的动画。 &amp;lt;canvas id=&quot;surface&quot;&amp;gt;&amp;lt;/canvas&amp;gt; 然后我们获取到canvas的dom对象，通过do...
android中对Canvas.drawCircle()方法的理解
MR CUI的专栏
01-09 1万+
功能说明 该方法用于在画布上绘制圆形，通过指定圆形圆心的坐标和半径来实现。该方法是绘制圆形的主要方法，同时也可以通过设置画笔的空心效果来绘制空心的圆形。 基本语法 public void drawCircle (float cx, float cy, float radius, Paint paint) 参数说明 cx：圆心的x坐标。 cy：圆心的y坐标。 radius：圆的半径。 pa...
使用Fabric.js玩转Canvas
Sugars的博客
02-13 9191
前言 之前使用这个框架写过一个卡片DIY的项目，中间遇到很多问题都只能通过google或github issues才能解决，国内资料较少，所以才想写这篇文章来简单的做下总结，希望可以帮到其他人哈。 附上个人项目地址：vue-card-diy 欢迎star~ ✨ 什么是Fabric.js? Fabric.js 是一个强大的H5 canvas框架，在原生canvas之上提供了交互式对象模型，通过简洁...
使用PDF.js渲染canvas实现预览pdf的效果
Daisy_1的博客
08-21 1万+
一、PDF.js的下载 从官网直接下载即可，地址：http://mozilla.github.io/pdf.js/getting_started/#download 建议下载稳定版本，如下图所示： 下载完成后将压缩包解压放在项目下，按照正常引入方式引入即可。 二、使用PDF.js 1.vue使用 第一步安装： npm install --save pdfjs-dist 第二步引入： import...
微信小程序CanvasContext.drawImage的用法
祗想安静地的博客
01-05 9753
最近做了一个生成海报的项目，有个需求需要画出图片。 我个人的想法是生成的图片像image的mode模式中的aspectFill显示的图片那样，“缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。” 也就是说保证图片的短边显示出来，超过的部分会被截取掉，图片不会变形 翻看了小程序文档的CanvasContext....
Android 画圆弧canvas.drawArc() 详解
热门推荐
csdn_aiyang的博客
05-11 2万+
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint) { drawArc(oval.left, oval.top, oval.right, oval.bottom, startA
chart.js基本知识——调整图表尺寸
gc_2299的博客
08-26 6348
介绍调整chart.js图表尺寸的几种方式
解决用html2canvas.js脚本生成图片模糊问题
Gavin-吴的博客
05-23 8378
用html2canvas.js的版本为1.0.0的才可以（说明：其他的没有试过，有时间的可以去试一下） <script src="html2canvas.js脚本路径" type="text/javascript"></script> 有需要的可以去下载 ：https://download.csdn.net/download/qq_35481871/11196937 ...
pdf.js使用文件流预览pdf
09-27
var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport, }; page.render...
html2canvas.js 下载
04-13
**html2canvas.js的原理与优势** html2canvas.js的工作原理是基于浏览器的DOM渲染机制，它遍历网页的DOM树，并将每个元素及其样式信息转换为Canvas上的图形。由于Canvas API提供了丰富的绘图方法，html2canvas能够...
d3.min.js d3.js
08-25
6. SVG和Canvas支持：D3主要基于SVG（可缩放矢量图形）进行绘图，同时也支持Canvas，提供了一种灵活的选择来满足不同的性能和兼容性需求。 7. 动画和交互：D3使创建平滑的过渡动画和响应用户交互变得容易，为可视化...
基于opencv实现象棋识别及棋谱定位python源码+数据集-人工智能课程设计
09-27
基于opencv实现象棋识别及棋谱定位python源码+数据集-人工智能课程设计，含有代码注释，满分课程设计资源，新手也可看懂，期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目可以作为课程设计期末大作业使用，该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 基于opencv实现象棋识别及棋谱定位python源码+数据集-人工智能课程设计，含有代码注释，满分课程设计资源，新手也可看懂，期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目可以作为课程设计期末大作业使用，该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 基于opencv实现象棋识别及棋谱定位python源码+数据集-人工智能课程设计，含有代码注释，满分课程设计资源，新手也可看懂，期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。该项目可以作为课程设计期末大作业使用，该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。基于opencv实现象棋识别及棋谱定位python源码+数据集
基于Python实现的Cowrie蜜罐设计源码
09-27
该项目为基于Python实现的Cowrie蜜罐设计源码，共计380个文件，涵盖166个Python源代码文件，以及包括RST、SQL、YAML、Markdown等多种类型的配置和文档文件。Cowrie蜜罐是一款用于记录暴力攻击和攻击者执行的SSH及Telnet交互的中等交互式蜜罐。
QT 摄像头获取每一帧图像数据以及opencv获取清晰度
09-27
QT 摄像头获取每一帧图像数据以及opencv获取清晰度
基于asp.net的(CS)地震预测系统设计与实现.docx
最新发布
09-27
基于asp.net的(CS)地震预测系统设计与实现.docx
基于Springboot和Mysql的医院药品管理系统代码（程序，中文注释）
09-27
医院药品管理系统-医院药品管理系统-医院药品管理系统-医院药品管理系统-医院药品管理系统-医院药品管理系统-医院药品管理系统-医院药品管理系统-医院药品管理系统-医院药品管理系统-医院药品管理系统-医院药品管理系统 1、资源说明：医院药品管理系统源码，本资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 2、适用人群：计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者，作为参考资料，进行参考学习使用。 3、资源用途：本资源具有较高的学习借鉴价值，可以作为“参考资料”，注意不是“定制需求”，代码只能作为学习参考，不能完全复制照搬。需要有一定的基础，能够看懂代码，能够自行调试代码，能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/details/135931154 技术栈、环境、工具、软件： ① 系统环境:Windows ② 开发语言：Java ③ 框架：SpringBo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值