一、颜色
- 填充颜色:fillStyle=color;
- 轮廓颜色:strokeStyle=color;
//1、fillStyle
ctx.fillStyle="rgb(255,0,0)";
ctx.fillRect(50,50,50,50);
//2、strokeStyle
ctx.strokeStyle="rgb(255,0,0)";
ctx.strokeRect(50,50,50,50);
二、透明度
globalAlpha=transparencyValue(透明度值)
globalAlpha属性,控制canvas里所有图形的透明度,值从0.0(完全透明)到1.0(完全不透明),默认值是1.0
当然,要想对某个单独图形设置透明度,可以使用rgba(R,G,B,transparencyValue)
三、线条样式
1、线宽:lineWidth=value
2、线条末端样式:lineCap=type
末端以方形结束:butt;
末端以圆形结束:round;(或者说用弧形更准确一点)
末端以方形结束:square;(与1的区别:线段两端会多出一部分,这部分的宽度和线段一样,高度是宽度的一半)
3、线条与线条连接处的样式:lineJoin=type
以圆形(弧)连接:round;
以一个额外的以三角形为底的区域连接:bevel;
以一个额外的菱形连接:miter;(这个也是默认的连接样式)
4、虚线
用setLineDash方法和lineDashOffset属性设置虚线样式。
setLineDash方法接受一个数组,指定实线长度和间隔长度;
lineDashOffset属性设置起始偏移量。
function draw4() {
var canvas4=document.getElementById("canvas4");
if(!canvas4.getContext) return;
var ctx4=canvas4.getContext("2d");
ctx4.setLineDash([20,5]);
ctx4.lineDashOffset=0;
ctx4.strokeRect(50,50,210,210);
}
四、绘制文本
绘制文本的两个方法:
- fillText(text,x,y);
- strokeText(text,x,y);
text是文本内容,x,y是文字底部坐标
文本属性:
- font=value;//字体大小以及样式,默认是"10px sans-serif"
- textAlign=value;//文本对齐
- textBaseline=value;//文本基线对齐
- direction=value;//文本方向
function draw5() {
var canvas5=document.getElementById("canvas5");
if(!canvas5.getContext) return;
var ctx5=canvas5.getContext("2d");
ctx5.font="30px sans-serif";
ctx5.textAlign="start";
//ctx5.direction="rtl";
ctx5.textBaseline="middle";
ctx5.fillText("canvas学习",10,100);
ctx5.strokeText("canvas学习",10,200);
}
五、绘制图像
var img = new Image();
img.src="0.jpg";
img.onload=function(){//确保图片加载完成
ctx.drawImage(img,0,0);
}
drawImage(img,x,y) //x,y就是图像在canvas的位置
drawImage(img,x,y,w,h) //后两个参数,是图像缩放后大小
drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) //将图片的某个区域切片,放在canvas相应位置
function draw6() {
var canvas6=document.getElementById("canvas6");
if(!canvas6.getContext) return;
var ctx6=canvas6.getContext("2d");
var img=new Image();
img.src="0.jpg";
img.onload=function(){
ctx6.drawImage(img,0,0);
//ctx6.drawImage(img,0,0,100,100);
//ctx6.drawImage(img,10,10,50,50,50,50,100,100);
}
}
六、状态保存和恢复
两个方法:
save();//把canvas当前状态保存进栈,状态包括:变形,样式。相当于push()
restore();//取出上一个保存的状态。相当于pop()
function draw7(){
var canvas = document.getElementById('canvas7');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形
ctx.save(); // 保存默认状态
ctx.fillStyle = 'red'; // 在原有配置基础上对颜色做改变
ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形
ctx.save(); // 保存当前状态
ctx.fillStyle = '#FFF'; // 再次改变颜色配置
ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形
ctx.restore(); // 重新加载之前的颜色状态
ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形
ctx.restore(); // 加载默认颜色配置
ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
}
七、变形
1、平移
translate(x,y) 移动的是canvas的坐标原点
2、旋转
rotate(x) 顺时针旋转,用弧度表示
3、缩放
scale(x,y) x,y方向缩小或放大
4、变形(保留)
transform(a,b,c,d,e,f) //变换矩阵
function draw1() {
var canvas1=document.getElementById("canvas1");
if(!canvas1.getContext) return;
var ctx1=canvas1.getContext("2d");
ctx1.save();//保存默认状态
ctx1.translate(50,50);
ctx1.strokeRect(0,0,50,50);
ctx1.restore();//弹出默认状态
ctx1.save();//保存默认状态
ctx1.translate(100,100);//平移
ctx1.fillRect(0,0,50,50);
ctx1.restore();//弹出默认状态
ctx1.save();//保存默认状态
ctx1.translate(150,50);
ctx1.rotate(Math.PI/180*45);//旋转
ctx1.fillStyle="blue";
ctx1.fillRect(0,0,50,50);
ctx1.restore();//弹出默认状态
ctx1.scale(1.5,1.5);//缩放
ctx1.fillRect(0,0,50,50);
}
八、合成
function draw2() {
var canvas2=document.getElementById("canvas2");
if(!canvas2.getContext) return;
var ctx2=canvas2.getContext("2d");
ctx2.fillStyle="red";
ctx2.fillRect(0,0,100,100);
ctx2.globalCompositeOperation="source-over";//默认值,新图像覆盖老图像
ctx2.globalCompositeOperation="source-in";//新图像显示重叠部分,老图像不显示
ctx2.globalCompositeOperation="source-out";//新图像显示没有重叠的部分,老图像不显示
ctx2.globalCompositeOperation="source-atop";//新图像显示重叠部分,老图像显示不重叠部分
ctx2.globalCompositeOperation="destination-over";//此下四个与上面四个刚好相反
ctx2.globalCompositeOperation="destination-in";
ctx2.globalCompositeOperation="destination-out";
ctx2.globalCompositeOperation="destination-atop";
ctx2.globalCompositeOperation="lighter";//重叠区域颜色做加处理
ctx2.globalCompositeOperation="darken";//保留重叠部分最黑的像素(每个颜色位比较,保留最小的)blue:#0000ff,red:#ff0000 得到:#000000
ctx2.globalCompositeOperation="lighten";//与上相反,保留最大颜色位
ctx2.globalCompositeOperation="xor";//重叠部分变透明
ctx2.globalCompositeOperation="copy";//只保留新图像
ctx2.fillStyle="blue";
ctx2.fillRect(50,50,100,100);
}
学习过程笔记,如有错误,欢迎指正
上一篇:canvas(一)
参考:https://blog.youkuaiyun.com/u012468376/article/details/73350998