主要实现
<!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>