canvas绘制矩形
程序员文章站
2022-05-30 09:26:53
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘制矩形</title>
<style>
body{
margin:0;
padding: 0;
}
</style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);//获取到canvas元素
var context = canvas.getContext('2d');//取得上下文
context.fillStyle = 'red';//设置大的矩形填充的颜色
context.strokeStyle = 'yellow';//设置小矩形边框的颜色
context.lineWidth = 5;//设置画笔的宽度
context.fillRect(0,0,500,500);//大矩形定位，x,y,宽，高
context.strokeRect(30,30,400,200);//小矩形定位，x,y,宽，高
context.strokeRect(60,50,200,400);//第二个小矩形定位，x,y,宽，高
}
</script>
</body>
</html>上一篇： HALCON灰度值变换
下一篇： Android 绘制文本的一些方法