Canvas学习笔记--绘制矩形
2018-06-26 本文已影响0人
小人物的秘密花园
参考
知识点
不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形。所有其他的图形的绘制都至少需要生成一条路径
绘制矩形的方法
绘制填充的矩形
fillRect(x, y, width, height);
绘制一个矩形的边框
strokeRect(x,y,width,height);
清除指定矩形区域,让清除部分完全透明
clearRect(x,y,width,height);
参数说明:
x:绘制图形左上角(起点)的横坐标;
y:绘制图形左上角(起点)的纵坐标;
width:绘制图形的宽;
height:绘制图形的高;
案例
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvas1');
if (canvas.getContext) {
var oContext = canvas.getContext('2d');
// 绘制一个尺寸是200px*200px的矩形
oContext.fillRect(50, 50, 200, 200);
// 擦除一个尺寸是180*180的矩形
oContext.clearRect(60, 60, 180, 180);
// 在擦除区域生成一个尺寸是140*140的边框
oContext.strokeRect(80, 80, 140, 140);
}
}
结果.png
注意:这三个方法绘制后会马上显示在画布上,即是实时显示的;