swwht(canvas).demo-优快云博客

本文介绍了一种使用HTML5 canvas元素进行图像绘制的方法。通过具体的JavaScript代码实现了包括矩形、三角形、圆形及文本的绘制，并展示了如何设置样式属性如颜色、字体等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要实现

canvas画布上绘制图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>死亡万花筒-永昼</title>
</head>
<body>
    <canvas id="yz" width="1000" height="700" style="border: 1px solid; margin-left: 200px;">
    </canvas>                                           <!-- 创建画布 -->
    <script type="text/javascript">
      window.onload=function(){                         //页面加载，执行该方法
        var title = "永昼";
        var can = document.getElementById('yz');        //找到 <canvas> 元素
        if(can.getContext){
            var context = can.getContext("2d");         //创建 context 对象
            context.scale(1,1);                         //缩放绘图
            context.rect(0,0,80, 80);                   //矩形
            context.fill();
            context.clearRect(30,30,20,20);
            context.fillRect(920,620,80,80);
            context.clearRect(950,650,20,20);
            context.fillStyle="red";
            context.fillRect(0,620,80,80);
            context.clearRect(30,650,20,20);
            context.fillRect(920,0,80,80);
            context.clearRect(950,30,20,20);
            
            context.beginPath();            //三角形
            context.lineWidth=2;
            context.moveTo(126,240);
            context.lineTo(80,320);
            context.lineTo(172,320);
            context.closePath();            //close将图像封闭
            context.stroke();
            context.beginPath();            //圆
            context.lineWidth=2;
            context.arc(126,294,27,0,2*Math.PI);
            // context.closePath();               //close后，没有360的弧会被直线关闭
            context.stroke();
            context.beginPath();            //直线
            context.moveTo(126,240);
            context.lineTo(126,320);
            context.closePath();
            context.stroke();

            //context.rotate(10*Math.PI/180)  //顺时针10度

            context.font = "bold 40px KaiTi";
            context.strokeStyle="black";
            context.strokeText(title,450,120); //无填充文本

            // context.shadowColor= "black";  //文字阴影
            // context.shadowBlur=1;
            // context.shadowOffsetX=1;
            // context.shadowOffsetY=1;

            context.font = "22px KaiTi";
            context.fillStyle="red";
            context.fillText("死亡万花筒",550,145);   //填充文本

            context.font = "25px KaiTi";
            context.fillStyle="black";
            context.fillText("眼中一瞬 透过引渡生死的门",330,180);
            context.fillText("长明灯火 烬燃天边孤月一轮",330,210);
            context.fillText("俯身 要敬鬼神",330,240);
            context.fillText("万千爱恨 荡然无存",330,270);
            context.fillText("此生一人 走过多少夏秋冬春",330,300);
            context.fillText("荒落的城 失落 过往冥冥幽魂",330,330);
            context.fillText("回眸 远方那人",330,360);
            context.fillText("笑语温存 重温美景良辰",330,390);
        }
      }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/xixicf/p/10588421.html