canvas绘制矩形和矩形边框

2025-10-08 13:48:58

1、新建文件并创建画布

canvas绘制矩形和矩形边框

2、定义函数获取画布

canvas绘制矩形和矩形边框

3、获取上下文

canvas绘制矩形和矩形边框

4、设置填充颜色

canvas绘制矩形和矩形边框

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

canvas绘制矩形和矩形边框

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

canvas绘制矩形和矩形边框

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

canvas绘制矩形和矩形边框

8、附上源码js部分

// JavaScript Document

function 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>

</head>

<canvas id="canvas

</body>

</html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。