canvas画布实现矩形的绘制
简单实现两种矩形的绘制:
第一种矩形背景填充简单说就是背景填充的实心矩形
代码实现:
绘制一个实心矩形cv.fillRect(x,y,width,height)绘制之前声明绘制的实心矩形颜色使用fillStyle
<canvas id="canvas" width="500" height="400">
<script type="text/javascript">
window.onload=function(){
//(获得滑板)抓取元素
var c=document.getElementById('canvas');
//获取绘画环境
var cv=c.getContext('2d');
//指定填充颜色
cv.fillStyle='red';
//绘制一个矩形cv.fillRect(x,y,width,height)
cv.fillRect(100,100,200,200);
}
</script>
</canvas>第二种矩形有线条构成,矩形内部没有填充可以设置矩形线条的颜色,线条宽度也叫空心矩形
代码实现:
绘制一个空心矩形cv.strokeRect(x,y,width,height)绘制之前声明绘制的实心矩形颜色使用strokeStyle,线条宽度使用lineWidth=10;表示线条宽度10像素!
<canvas id="canvas" width="500" height="400">
<script type="text/javascript">
window.onload=function(){
//(获得滑板)抓取元素
var c=document.getElementById('canvas');
//获取绘画环境
var cv=c.getContext('2d');
//指定填充颜色
//线条宽度lineWidth='';
cv.lineWidth=5;
//线条填充颜色strokeStyle='颜色'
cv.strokeStyle='#26faaf';
//空心矩形strokerect(x,y,width,height)
cv.strokeRect(50,80,220,220);
}
</script>
</canvas>注意:填充使用fillRect,绘制空心使用strokeRect,样式等属性使用在构造矩形之前进行使用,填充相关使用fill,空心相关的使用stroke
get一下:
在矩形内进行清除已经绘制矩形的某个区域可以使用清除实现clearRect(left,top,width,height);
矩形内部清除代码实现:
<canvas id="canvas" width="500" height="400">
<script type="text/javascript">
window.onload=function(){
//(获得滑板)抓取元素
var c=document.getElementById('canvas');
//获取绘画环境
var cv=c.getContext('2d');
//指定填充颜色
cv.fillStyle='red';
//绘制一个矩形cv.fillRect(x,y,width,height)
cv.fillRect(100,100,200,200);
//线条宽度lineWidth='';
// cv.lineWidth=5;
// //线条填充颜色strokeStyle='颜色'
// cv.strokeStyle='#26faaf';
// //空心矩形strokerect(x,y,width,height)
// cv.strokeRect(50,80,220,220);
//清除绘图部分clearRect(x,y,width,height),清空矩形内的像素(背景填充)
cv.clearRect(50,80,180,80);
}
</script>
</canvas>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-1-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
