一、Canvas2D模型的属性
1.canvas 在对象CanvasRenderingContext2D的原型对象上可以添加方法 直接调用使用
2.context.canvas ----返回当前操作的canvas对象(只读)
console.log(context.canvas);
3.fillStyle :给canvas中的各种图形填充样式,默认填充样式是黑色#000。语法:
context.fillStyle = color;
context.fillStyle = gradient;
context.fillStyle = pattern;
4.font :用于在canvas文本绘制时候的字号字体控制,默认是10px,sans-serif.语法:
context.font = value;
5.globalAlpha :设置画布的全局透明度,范围是0-1,0表示完全透明,1表示完全不透明。语法:
context.globalAlpha = value;
其中value就是设置的全局透明度,范围是0到1。
6.globalCompositeOperation :设置canvas图形的混合模式。可以衍生很多效果,例如遮盖、剪裁、改变绘制图形的上下层叠关系。语法
context.globalCompositeOperation = type;
context.lineCap = 'butt';
context.lineCap = 'round';
context.lineCap = 'square';
context.lineJoin = 'miter';
context.lineJoin = 'round';
context.lineJoin = 'bevel';
9.lineWidth :表示线宽。默认值是1.0.语法
context.lineWidth = value;
value表示线的宽度。数值类型,默认值是1.0。
context.shadowBlur = value;
value表示阴影的模糊程度,可以是小数,默认是0.
11.shadowColor :阴影的颜色,默认是透明黑。语法
context.shadowColor = color;
12.shadowOffsetX :阴影的水平偏移大小。语法
context.shadowOffsetX = offset;
13.shadowOffsetY :阴影的垂直偏移大小。语法
context.shadowOffsetY= offset;
14.strokeStyle :用来设置描边的样式。可以是路径的描边,也可以是形状的描边,也可以是文字的描边,描边的样式也不仅限于颜色。语法
context.strokeStyle = color;
context.strokeStyle = gradient;
context.strokeStyle = pattern;
15.textAlign :用在文本绘制的时候。可以指定文本的水平对齐方式。语法
context.textAlign = value;
16.textBaseline :用在文本绘制的时候。可以指定文本对齐的基线。语法
context.textBaseline = value;
canvas2D属性案例—绘制文本
<canvas id="canvas"></canvas>
<script>
var sw = screen.availWidth;
var sh = screen.availHeight;
canvas.width = sw;
canvas.height = sh;
var conText2D = canvas.getContext('2d');
//绘制文本
conText2D.font = "40px 楷体";
conText2D.fillStyle = 'blue';
conText2D.globalAlpha = 1;
conText2D.shadowBlur = 10;
conText2D.shadowColor = 'yellow';
conText2D.shadowOffsetX = 10;
conText2D.shadowOffsetY = 10;
conText2D.fillText('赵佳敏',100,100,300);
conText2D.textBaseline = 'bottom';
conText2D.beginPath();
conText2D.moveTo(100,110);
conText2D.lineTo(250,110);
conText2D.closePath();
conText2D.strokeStyle = 'orange';
conText2D.strokeText('小赵',100,200,300);
conText2D.stroke();
</script>
二、Canvas 2D模型的方法
1.arc() —用来绘制圆弧。由于圆本质上就是个封闭圆弧,因此,此方法也可以用来绘制正圆。语法
context.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
2.fillText() –用来填充文字,绘制纯文本。语法
context.fillText(text, x, y [, maxWidth]);
context.strokeText(text, x, y [, maxWidth]);
context.fill();
context.fill(fillRule);
context.fill(path, fillRule);
context.stroke();
context.stroke(path);//path:指Path2D对象。
6.arcTo() —给路径添加圆弧,需要指定控制点和半径。常用于绘制标准圆角。语法
context.arcTo(x1, y1, x2, y2, radius);
7.bezierCurveTo() —用来绘制贝塞尔曲线。需要三个控制点,前两个是控制点,第三个点是结束点,而起始点是当前路径的最后一个控制点,如果之前并无路径,可以使用moveTo()作为起始点。语法
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
案例1—绘制圆弧
conText2D.beginPath();
conText2D.strokeStyle = 'red';
conText2D.arc(500,500,50,0,Math.PI * 2,true);
//绘制半圆
//conText2D.arc(300,300,50,0,Math.PI/2,true);
//conText2D.stroke();
conText2D.fill();
conText2D.closePath();
conText2D.beginPath();
conText2D.lineWidth = 5;
conText2D.moveTo(100,300);
conText2D.arcTo(200,350,250,280,40);
conText2D.lineTo(250,280);
conText2D.stroke();
conText2D.closePath();
conText2D.beginPath();
conText2D.moveTo(400,200);
conText2D.bezierCurveTo(430,50,580,400,700,200);
conText2D.stroke();
conText2D.closePath();
8.fillRect() —绘制区域,矩形填充方法。语法
context.fillRect(x, y, width, height);
9.strokeRect() —实现矩形描边效果。语法
context.strokeRect(x, y, width, height);
10.clearRect() —清除区域。把某块矩形区域变成透明的。语法
context.clearRect(x, y, width, height);
案例2—绘制矩形
conText2D.beginPath();
conText2D.strokeStyle = 'blue';
conText2D.strokeRect(800,100,200,200);
conText2D.stroke();
conText2D.fillStyle = 'green';
conText2D.fillRect(1050,100,200,200);
conText2D.fill();
conText2D.closePath();
案例3—清除区域
conText2D.beginPath();
conText2D.fillStyle = 'green';
conText2D.fillRect(1050,100,200,200);
conText2D.fill();
conText2D.closePath();
//清除区域
conText2D.clearRect(1100,200,50,50);
11.moveTo() –路径绘制的点移动到,通常表示路径绘制的起始点。语法
context.moveTo(x, y);
12.lineTo() —绘制直线以连接当前最后的子路径点和lineTo()指定的点。、语法
context.lineTo(x, y);
13.clip() —路径剪裁。使用时,先绘制裁剪路径,执行clip()的内容就在这个剪裁路径中呈现。语法
context.clip();
context.clip(fillRule);
context.clip(path, fillRule);
context.drawImage(image, dx, dy);
context.drawImage(image, dx, dy, dWidth, dHeight);
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
案例4—绘制图像(裁剪)
//绘制图像
conText2D.beginPath();
var image = new Image();
image.src = './img/2.jpg';
//设置裁剪的路径
conText2D.moveTo(150,0);
conText2D.lineTo(150,300);
conText2D.lineTo(300,300);
conText2D.lineTo(150,0);
conText2D.clip();
//conText2D.drawImage(image,0,0,200,200);
conText2D.drawImage(image,0,0,500,500,0,0,300,300);
conText2D.closePath();
15.createImageData() —创建image图像数据,也就是创建一个全新的空的ImageData对象。语法
context.createImageData(width, height);
context.createImageData(imagedata);
16.putImageData() —绘制imageData对象到指定位置。语法
context.putImageData(imagedata, dx, dy);
context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
案例5—点阵图效果
var sw = document.documentElement.clientWidth;
var sh = document.documentElement.clientHeight;
canvas.width = sw;
canvas.height = sh;
var context = canvas.getContext('2d');
var imageData = context.createImageData(300,150);
for(var i = 1;i<=300;i+=5){
for(var k = 1;k<=150;k+=5){
var index = 4*((i-1)+300*(k-1));
imageData.data[index] = 0;
imageData.data[index+1] = 128;
imageData.data[index+2] = 0;
imageData.data[index+3] = 256;
}
}
context.putImageData(imageData,100,100);
17.getImageData() —返回一个ImageData对象,其中包含Canvas画布部分或完整的像素点信息。语法
context.getImageData(sx, sy, sWidth, sHeight);
案例6—把图片某块区域变成灰色。
//获取图像像素点信息
var image = new Image();
image.src = './img/2.jpg';
context.drawImage(image,300,0,300,300);
var datapx = context.getImageData(450,0,150,150);
var length = datapx.data.length;
for(var i = 1;i<length;i+=4){
var r = datapx.data[i];
var g = datapx.data[i+1];
var b = datapx.data[i+2];
var gray = r * 0.299 + g * 0.587 + b * 0.114;
datapx.data[i] = gray;
datapx.data[i+1] = gray;
datapx.data[i+2] = gray;
}
context.putImageData(datapx,450,0);
18.save() —保存当前Canvas画布状态并放在栈的最上面.语法
context.save();
19.restore() —依次从堆栈的上方取出储存的canvas状态。语法
context.restore();
20.rotate() —给canvas画布添加旋转矩阵。语法
context.rotate(angle);
21.translate() —对canvas坐标系进行整体位移。语法
context.translate(x, y);
22.scale() —缩放canvas画布的坐标系。语法
context.scale(x, y);