清除矩形

最新推荐文章于 2024-09-24 21:53:47 发布

weixin_30439131

最新推荐文章于 2024-09-24 21:53:47 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/996158041chenlu/p/5730690.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="clear" width="400" height="400" style="background-color: darkmagenta;"></canvas>
<script>
var mycon = document.getElementById("clear").getContext("2d");
mycon.fillStyle = "red";
mycon.fillRect(0,0,100,100);
mycon.clearRect(20,20,50,50);//清除矩形

//第一张图为三角形，是自定义的形状，没有闭合，所以需要beginPath和closePath
mycon.beginPath();
mycon.lineWidth = 20;
mycon.lineJoin = "round";//两条线相交之处设置为圆角
mycon.moveTo(10,200);
mycon.lineTo(200,200);
mycon.lineTo(100,50);
mycon.closePath();
mycon.stroke();

//第二张图为矩形，不需要beginPath和closePath
mycon.rect(10,100,200,50);
mycon.stroke();
mycon.clip();//将矩形设置为剪裁区域
mycon.fillStyle = "aquamarine";//将两张图绘制完后再进行填充渲染
mycon.fill();
</script>
</body>
</html>