小白学canvas-描边/填充/清空矩形
2017-12-08 本文已影响0人
芥末海苔QAQ
昨天学到可以用moveTo()，lineTo()来绘制首尾相连的直线，所以矩形也可以用这样的方法绘制出来。但是canvas中绘制矩形有更简便的方法。
描边矩形
- 首先定义矩形的属性，即颜色值、渐变色、图案，使用 strokeStyle=“属性值”，
关于颜色值有#ff0000，red，rgb(255,0,0)，rgba(255,0,0,0.5)几种（a就是Alpha，表示不透明度） - 然后绘制矩形，使用 strokeRect(x,y,width,height) 方法，默认情况下单位为px。
strokeStyle属性必须在strokeRect()方法之前定义，否则属性无效
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//封装
function $$(id){
return document.getElementById(id);
}
window.onload=function(){
//提取
var cnv=$$("canvas");
var cxt=cnv.getContext("2d");
//描边矩形
cxt.strokeStyle="red";
cxt.strokeRect(40,20,130,100);
}
</script>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
描边矩形ヾ(◍°∇°◍)ﾉﾞ
填充矩形
使用 fillStyle=“属性值”，fillRect(x,y,width,height) 就可以绘制填充矩形啦~
另外描边填充矩形就是 描边矩形+填充矩形
//填充矩形
cxt.fillStyle="yellow";
cxt.fillRect(80,30,130,100);
填充矩形(๑╹◡╹)ﾉ"""
清空矩形
使用clearRect(x,y,width,height)方法挖掉矩形，emmm~有点像ps里的“减去顶层形状”
//清除矩形
cxt.clearRect(90,40,40,30);
挖掉了一块(￣～￣)嚼！
如果使用clearRect(0,0,cnv.width,cnv.height)就可以清空整个画板啦~
（cnv就是用于获取id的东东，根据各人写的不同来定）
