<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset=”UTF-8″>
　　　　<title>绘制矩形</title>
　　</head>
　　<body>
　　　　<canvas id=”drawing” height=”500″ width=”500″>A drawing of something.</canvas>
　　　　<script type=”text/javascript”>
　　　　var drawing = document.getElementById(“drawing”)
　　　　if(drawing.getContext)
　　　　{
　　　　　　var context = drawing.getContext(“2d”)

　　　　　　context.strokeStyle.lineCap = “square”
　　　　　　//绘制红色矩形
　　　　　　context.fillStyle = “#ff0000”;
　　　　　　context.strokeStyle = “black”
　　　　　　context.fillRect(10,10,60,60);
　　　　　　context.strokeRect(10,10,60,60);

　　　　　　//绘制半透明的蓝色矩形
　　　　　　context.strokeStyle = “red”
　　　　　　context.fillStyle = “rgba(0,0,255,0.5)”;
　　　　　　context.fillRect(30,30,50,50);
　　　　　　context.strokeRect(30,30,50,50);

　　　　　　//context.fiilRect的第一个和第二个参数代表着以画布的上面为x坐标，左边为y坐标的x,y坐标的值

　　　　　　context.clearRect(40,40,20,20)
　　　　　　//第一个和第二个参数表示的是坐标，第三个和第四个表示的是长宽的大小

　　　　　　// context.beginPath();
　　　　　　context.lineWidth = 10;//线条的宽度
　　　　　　context.lineCap = “round”;//线条在最后面的位置
　　　　　　context.moveTo(90,60);//表示线条的末端的位置
　　　　　　context.lineTo(200,20);//表示线条前端的位置
　　　　　　context.stroke();//表示画图

　　　　　　}
　　　</script>
　　</body>
</html>

版权声明：本文为MyUniverse原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/MyUniverse/p/9998723.html