canvas绘制矩形和矩形边框

时间:2024-11-09 20:06:36

1、新建文件并创建画布

canvas绘制矩形和矩形边框

2、定义函数获取画布

canvas绘制矩形和矩形边框

3、获取上下文

canvas绘制矩形和矩形边框

4、设置填充颜色

canvas绘制矩形和矩形边框

5、设置边框颜色和边框宽度

canvas绘制矩形和矩形边框

6、绘制填充矩形和边框矩形

canvas绘制矩形和矩形边框
canvas绘制矩形和矩形边框

7、改变填充颜色观察效果

canvas绘制矩形和矩形边框
canvas绘制矩形和矩形边框

8、附上源码js部分// JavaScript Documentfunction draw(id){ var canvas = document.getElementById("canvas"); var context =canvas.getContext("2d"); context.fillStyle = "red"; context.strokeStyle = "#f60"; context.lineWidth = 4; context.fillRect(0,0,200,200) context.strokeRect(20,20,70,150); context.strokeRect(40,40,70,150); }html部分<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>绘制矩形</title> <script src="canvas.js"></script></head><body onLoad="draw('canvas');"> <canvas id="canvas" width="500" height="400"></canvas></body></html>

© 手抄报圈