Html5画布绘制七巧板

最新推荐文章于 2023-05-19 13:56:07 发布

快乐江小鱼

最新推荐文章于 2023-05-19 13:56:07 发布

阅读量2k

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/dolly_baby/article/details/51915867

版权

Html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>绘制七巧板</title>
</head>
<body>
<div style="margin:0 auto;width:600px;height:auto;text-align:center">
<canvas id="myCanvas" width="600" height="600" style="display:block;margin:50px auto"></canvas>
</div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//开始绘制
ctx.beginPath();
//第一个三角形
//绘制的基点
ctx.moveTo(0,0);
//绘制从前一点到这点的直线
ctx.lineTo(300,300);
ctx.lineTo(0,600);
ctx.closePath();//填充或闭合需要先闭合路径才能画
//空心三角形
//ctx.strokeStyle="#ff7900"
//ctx.stroke();
//实心三角形
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,300);
ctx.lineTo(0,600);
ctx.closePath();
ctx.fillStyle='rgba(200,0,0,0.5)';
ctx.fill();

//第二个三角形
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,0);
ctx.lineTo(150,150);
ctx.closePath();
ctx.fillStyle='rgba(255,121,0,0.5)';
ctx.fill();

//第三个三角形
ctx.beginPath();
ctx.moveTo(300,0);
ctx.lineTo(600,0);
ctx.lineTo(600,300);
ctx.closePath();
ctx.fillStyle="rgba(255,0,0,0.5)";
ctx.fill();

//第四个三角形
ctx.beginPath();
ctx.moveTo(0,600);
ctx.lineTo(600,600);
ctx.lineTo(300,300);
ctx.closePath();
ctx.fillStyle="rgba(3,165,72,0.5)";
ctx.fill();

// 第五个三角形
ctx.beginPath();
ctx.moveTo(300,300);
ctx.lineTo(450,150);
ctx.lineTo(450,450);
ctx.closePath();
ctx.fillStyle="rgba(46,180,255,0.5)";
ctx.fill();
// 正方形
ctx.beginPath();
ctx.moveTo(300,0);
ctx.lineTo(450,150);
ctx.lineTo(300,300);
ctx.lineTo(150,150);
ctx.closePath();
ctx.fillStyle="rgba(255,245,0,0.5)";
ctx.fill();

// 平行四边形
ctx.beginPath();
ctx.moveTo(600,600);
ctx.lineTo(600,300);
ctx.lineTo(450,150);
ctx.lineTo(450,450);
ctx.closePath();
ctx.fillStyle="rgba(100,0,196,0.5)";
ctx.fill();
</script>
</body>
</html>