您的位置：首页 > Web前端 > HTML5

【坑】html5中使用canvas绘制两个strokeRect之间忘了用beginPath()

2015-08-11 09:13 706 查看

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas {
border: thin solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1200" height="800"></canvas>

</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();

context.strokeStyle = "rgba(0,0,255,0.5)";
context.lineWidth = 10;
context.rect(10, 10, 500, 500);
context.stroke();

context.strokeStyle = "rgba(255,0,0,0.5)";
context.lineWidth = 10;
context.rect(150, 150, 500, 500);
context.stroke();

</script>
</html>

在线演示

原因

由于没有加context.beginPath()在两次绘制路径之间，所以浏览器会认为后面的那个rect绘制的是前一个rect的子路径，当第二的rect以rgba(255,0,0,0.5)颜色绘制的时候，由于它是子路径，就会把它的父路径也用同样的方式绘制一遍，所以第一个rect不是蓝色而是蓝色和红色的混合色（我这里使用了半透明以便你们看得出来是两种颜色的混合）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航