03、canvas标签之绘制矩形

来源：互联网发布：事业单位养老金知乎编辑：程序博客网时间：2024/05/14 02:12

canvas标签

<canvas width="" height="" id="">您的浏览器不支持canvas，请更换浏览器！</canvas>
默认宽度300px，默认高度 150p（宽高度设置在标签内部，如果设置在css样式style中会出错，那样会通过比例进行预算）
canvas绘图环境设置
.getContext("2d"); 目前支持2d绘图环境

设置绘图样式：
.fillStyle: 填充颜色
.strokeStyle: 触笔颜色
.lineWidth: 触笔宽度(线宽)

图形边界样式：
.lineJoin : 边界连接点样式
miter(默认值),round(圆角),bevel(斜角)
.lineCap: 端点样式
butt(默认值),round(圆角),square(高度多出线宽一半)

绘制矩形：
.fillRect(x,y,w,h) 填充实心矩形
.strokeRect(x,y,w,h) 绘制空心矩形
.clearRect(x,y,w,h) 清除矩形选区

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style>#canvas{background:#b086a3;}</style></head><body><canvas id='canvas' width='500px' height='500px'>您的浏览器不支持，请更新浏览器!</canvas><script>/*设置绘图样式：fillStyle: 填充颜色strokeStyle: 触笔颜色lineWidth: 触笔宽度(线宽)图形边界样式：lineJoin : 边界连接点样式miter(默认值),round(圆角),bevel(斜角)lineCap: 端点样式butt(默认值),round(圆角),square(高度多出线宽一半)绘制矩形：fillRect(x,y,w,h)   填充实心矩形   x,y,为绘制起点，w,h为矩形的宽高度strokeRect(x,y,w,h)  绘制空心矩形  x,y,为绘制起点，w,h为矩形的宽高度clearRect(x,y,w,h)  清除矩形选区 x,y,为绘制起点，w,h为矩形的宽高度*/var ocan = document.getElementById('canvas');var oCanvas = ocan.getContext("2d");//那大canvas并2d渲染环境;oCanvas.fillStyle='#ff0099';//设置填充颜色oCanvas.strokeStyle='#cc0033';//设置触笔方法的颜色oCanvas.lineWidth=10;//设置触笔宽度(线宽)oCanvas.lineJoin="round";//边界连接点样式oCanvas.lineCap="round";//端点样式//oCanvas.fillRect(50,50,100,100);// 绘制一个实心的矩形 oCanvas.strokeRect(50,50,100,100);//绘制空心矩形//前面绘制的内容会被后面的覆盖//oCanvas.clearRect(0,0,ocan.width,ocan.height);//清楚画布内容</script></body></html>

0 0