【Canvas与诗词】苔.袁枚

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

【成图】

【代码】

<!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,231,149)");
        gnt.addColorStop(0.25,"rgb(246,231,152)");
        gnt.addColorStop(0.50,"rgb(255,251,180)");
        gnt.addColorStop(0.6,"rgb(144,100,26)");
        gnt.addColorStop(0.75,"rgb(207,139,46)");
        gnt.addColorStop(1,"rgb(154,83,16)");
        ctx.fillStyle=gnt;
        drawRoundSixPolygon(ctx,0,0,r,R/20);
        ctx.fill();
        ctx.restore();

        // 平边
        ctx.save();        
        var r=R*0.98;
        var gnt=ctx.createLinearGradient(0,-r,0,r);
        gnt.addColorStop(0,"rgb(224,194,112)");
        gnt.addColorStop(0.25,"rgb(239,221,142)");
        gnt.addColorStop(0.50,"rgb(254,248,174)");
        gnt.addColorStop(0.6,"rgb(154,91,19)");
        gnt.addColorStop(0.75,"rgb(221,157,64)");
        gnt.addColorStop(1,"rgb(164,99,25)");
        ctx.fillStyle=gnt;
        drawRoundSixPolygon(ctx,0,0,r,R/20);
        ctx.fill();
        ctx.restore();

        // 内边
        ctx.save();        
        var r=R*0.92;
        var gnt=ctx.createLinearGradient(0,-r,0,r);
        gnt.addColorStop(0,"rgb(154,83,16)");
        gnt.addColorStop(0.25,"rgb(207,139,46)");
        gnt.addColorStop(0.50,"rgb(144,100,26)");
        gnt.addColorStop(0.6,"rgb(255,251,180)");
        gnt.addColorStop(0.75,"rgb(246,231,152)");
        gnt.addColorStop(1,"rgb(252,231,149)");
        ctx.fillStyle=gnt;
        drawRoundSixPolygon(ctx,0,0,r,R/20);
        ctx.fill();
        ctx.restore();

        // 渐变底
        ctx.save();        
        var r=R*0.90;
        var gnt=ctx.createLinearGradient(0,-r,0,r);
        gnt.addColorStop(0,"black");
        gnt.addColorStop(1,"grey");
        ctx.fillStyle=gnt;
        drawRoundSixPolygon(ctx,0,0,r,R/20);
        ctx.fill();
        ctx.restore();        

        // 红黑底
        ctx.save();        
        var r=R*0.89;
        var gnt=ctx.createRadialGradient(0,0,0,0,0,r);
        gnt.addColorStop(0,"rgb(22,74,159)");
        gnt.addColorStop(1,"rgb(7,4,20)");
        ctx.fillStyle=gnt;
        drawRoundSixPolygon(ctx,0,0,r,R/20);
        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 angle=-Math.PI/6;
        var a=createPt(r*Math.cos(angle),r*Math.sin(angle));

        angle=-Math.PI/2;
        var b=createPt(r*Math.cos(angle),r*Math.sin(angle));

        var e=createPt(a.x/2+b.x/2,a.y/2+b.y/2);

        angle=-Math.PI/6*5;
        var c=createPt(r*Math.cos(angle),r*Math.sin(angle));

        angle=-Math.PI-Math.PI/6;
        var d=createPt(r*Math.cos(angle),r*Math.sin(angle));        

        var f=createPt(c.x/2+d.x/2,c.y/2+d.y/2);

        var h=createPt(f.x/2+e.x/2,f.y/2+e.y/2);

        r=R*0.22;
        angle=-Math.PI/3*2;
        var g=createPt(h.x+r*Math.cos(angle),h.y+r*Math.sin(angle));        
        ctx.fillStyle="rgba(190,190,190,0.1)"; // 填充半透明色
        ctx.beginPath();
        ctx.moveTo(e.x,e.y);
        ctx.lineTo(b.x,b.y);
        ctx.lineTo(c.x,c.y);
        ctx.lineTo(f.x,f.y);
        ctx.quadraticCurveTo(g.x,g.y,e.x,e.y);
        ctx.lineTo(e.x,e.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

普兰店拉马努金
关注
专栏目录
H5画布 canvas（三）canvas 库 Konva.js 的使用
商务合作 | 共同学习 | 携手共进
02-24 9万+
本文详细介绍了HTML5 2d canvas 库 Konva.js的使用方法。
Android canvas画布裁剪canvas.clipRect()的作用
怡红绿玉
12-22 3480
该方法用于裁剪画布，也就是设置画布显示的区域。 调用clipRect()方法后，只会显示被裁剪的区域，之外的区域不会显示。 canvas.clipRect(rect: RectF, op: Region.Op)， 有两个参数。 第一个参数为裁剪的矩形区域。第二个参数为裁剪区域的类型（默认为Region.Op.INTERSECT)。 Region.Op参数的意义： 比如有两个图形A和B DIFFERENCE 现实图形B之外的区域。 REVERSE_DIFFERENCE UNION REPLACE XOR
Vue与uniapp中如何使用canvas？
...
10-06 4343
Vue与uniapp中如何使用canvas？
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...
Canvas画布作为Three.js纹理贴图(CanvasTexture)
u014291990的博客
11-12 8687
Canvas画布作为Three.js纹理贴图(CanvasTexture) Canvas画布可以通过2D API绘制各种各样的几何形状，可以通过Canvas绘制一个轮廓后然后作为Three.js网格模型、精灵模型等模型对象的纹理贴图。 一段Canvas代码 下面是一段与WebGL或者说Threejs无关的Canvas代码，你可以在.html文件中打开查看一下，通过下面代码绘制的Cnavas画布可以...
Android Canvas.drawBitmap 绘制bitmap
YK
02-18 6289
Android Canvas.drawBitmap 绘制bitmap
fabric.Canvas
热门推荐
hbh112233abc的博客
01-14 1万+
fabric.Canvas 说明文档
Canvas. drawTextOnPath()
本然233的博客
11-01 4340
void drawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint) void drawTextOnPath (char[] text, ...
Android Canvas.drawText(...)自动换行
fz_dev的博客
05-24 7365
canvas.save();TextPaint textPaint = new TextPaint();textPaint.setTextSize(17);textPaint.setColor(Color.BLACK);String data = "222222222222222222222222222222222222222222222222222222222222222222222222222
html2canvas.js 下载
04-13
**html2canvas.js的原理与优势** html2canvas.js的工作原理是基于浏览器的DOM渲染机制，它遍历网页的DOM树，并将每个元素及其样式信息转换为Canvas上的图形。由于Canvas API提供了丰富的绘图方法，html2canvas能够...
html2canvas.js--自定义高度
01-12
修改html2canvas.js源码,可以解决截图不全问题.使用方式参考 http://blog.csdn.net/q2365921/article/details/54377479
canvas2image.js
10-12
canvas2image.js 将canvas转化为image的js插件，可以将画布内容下载实现截图功能。
前端可视化：Fabric.js HTML5 canvas 工具库
彭世瑜的博客
07-22 6803
Fabric.js 是一个功能强大且操作简单的 Javascript HTML5 canvas 工具库。缩放 scaleX 和 scaleY。反转 scaleX 和 scaleY。平移 top 和 left。以鼠标指针为基准缩放画布。fabric 内置滤镜。旋转角度 angle。以原点为基准缩放画布。自定义边和控制角样式。......
快手截流协议v1.11（持续更新版本）
09-29
私域引流获客，引流变现，快手截流协议工具。（非市面烂大街不更新的版本）
基于C#的语言课程网设计与实现.docx
09-29
基于C#的语言课程网设计与实现.docx
基于asp.net的在线图片管理系统设计与实现.docx
09-29
基于asp.net的在线图片管理系统设计与实现.docx
【光学】基于matlab均匀分布光子筛成像【含Matlab源码 8064期】.zip
最新发布
09-29
CSDN海神之光上传的全部代码均可运行，亲测可用，尽我所能，为你服务； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、物理应用 仿真：导航、地震、电磁、电路、电能、机械、工业控制、水位控制、直流电机、平面电磁波、管道瞬变流、刚度计算 光学：光栅、杨氏双缝、单缝、多缝、圆孔、矩孔衍射、夫琅禾费、干涉、拉盖尔高斯、光束、光波、涡旋 定位问题：chan、taylor、RSSI、music、卡尔曼滤波UWB 气动学：弹道、气体扩散、龙格库弹道 运动学：倒立摆、泊车 天体学：卫星轨道、姿态 船舶：控制、运动 电磁学：电场分布、电偶极子、永磁同步、变压器
基于C#的购实惠零食网设计与实现.docx
09-29
基于C#的购实惠零食网设计与实现.docx
html2canvas.js：页面截图与上传实战与SVG处理
var url = canvas.toDataURL("image/png"); // 图片显示或上传 window.location.href = url; // 展示在新窗口 // 或者其他上传接口，如axios或fetch } }); ``` 然而，使用过程中可能会遇到一些挑战。例如，由于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值