canvas核心
@ 姜波 | 星期五,七月 19 日,2019 年 | 2 分钟阅读 | 更新于 星期五,七月 19 日,2019 年

canvas初体验

//获取画布
var canvas=document.querySelector("canvas");

//获取画布上下文对象
var ctx=canvas.getContext("2d");

//绘图步骤: 落笔点->连线->描边
ctx.moveTo(100, 100);  //落笔
ctx.lineTo(100, 300);  //连线
ctx.stroke();		   //描边

解决绘图重绘问题

//绘制一条横线
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.stroke();//解决方式一:设置一个stroke()

//绘制一条竖线
ctx.beginPath();//解决方式二:开启新的图层
ctx.moveTo(100,100);
ctx.lineTo(100,300);
ctx.stroke();

连线绘制

绘制带样式的线

//绘制一条线宽为10像素的红色直线
ctx.strokeStyle="red";
ctx.lineWidth="10";
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.stroke();

线连接方式

ctx.lineWidth="20";
ctx.strokeStyle="red";

// 设置线的链接方式
ctx.lineJoin="miter";//miter、round、bevel

ctx.moveTo(100, 50);
ctx.lineTo(200, 100);
ctx.lineTo(100, 150);
ctx.stroke();

线帽

ctx.strokeStyle="red";
ctx.lineWidth="20";

//设置线帽
ctx.lineCap="butt";//butt、round、square

ctx.moveTo(100, 50);
ctx.lineTo(300, 50);
ctx.stroke();

虚线

ctx.strokeStyle="red";
ctx.moveTo(100, 50);
ctx.lineTo(400, 50);
ctx.setLineDash([20,20]);
ctx.stroke();

非零环绕

//绘制一个300*300矩形
ctx.moveTo(150, 50);
ctx.lineTo(450, 50);
ctx.lineTo(450, 350);
ctx.lineTo(150, 350);
ctx.lineTo(150, 50);

//开始绘制图形
ctx.moveTo(300, 100);
ctx.lineTo(200, 200);
ctx.lineTo(250, 200);
ctx.lineTo(250, 300);
ctx.lineTo(350, 300);
ctx.lineTo(350, 200);
ctx.lineTo(400, 200);
ctx.lineTo(300, 100);
ctx.fill();

渐变

线性渐变

//创建渐变方案
var lgd=ctx.createLinearGradient(100, 50, 300, 50);

//添加开始颜色
lgd.addColorStop(0, "red");

//添加结束颜色
lgd.addColorStop(1, "blue");

ctx.strokeStyle=lgd;
ctx.lineWidth="50";
ctx.moveTo(100, 50);
ctx.lineTo(300, 50);
ctx.stroke();

径向渐变

var rgd=ctx.createRadialGradient(200, 150, 50, 200, 150, 100);

rgd.addColorStop(0, "red");
rgd.addColorStop(1, "pink");

ctx.fillStyle=rgd;
ctx.moveTo(100, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 300);
ctx.lineTo(100, 300);
ctx.closePath();
ctx.fill();

路径绘制

矩形

//描边矩形
ctx.strokeStyle="red";
ctx.strokeRect(100, 100, 200, 200);
ctx.beginPath();

//填充矩形
ctx.fillStyle="red";
ctx.fillRect(330, 100, 200,200);

//清除效果
ctx.clearRect(340, 100, 10, 200);

动画矩形

//开始位置
var x=0;

//处理的是一个增量
var step=5;

//改变的方向的
var i=1;

//创建一个定时器
setInterval(function(){
	//先清屏
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	//开始绘制图形
	ctx.fillRect(x, 100, 100, 200);

	//开始处理变量
	x+=step*i;
	if(x>canvas.width-100){
		i=-1;
	}else if(x<0){
		i=1;
	} 	 	
},20);

圆弧

ctx.arc(300, 200, 100, 0, 2*Math.PI);
ctx.stroke();

圆弧上任意一点

ctx.arc(300, 200, 100, 0, 2*Math.PI);
ctx.stroke();

ctx.beginPath();
var x=300+Math.cos(Math.PI/3)*100;
var y=200+Math.sin(Math.PI/3)*100;
ctx.arc(x, y, 10, 0, Math.PI*2);
 
ctx.fillStyle="red";
ctx.fill();

文本绘制

//设置文字大小: 与css设置文字一样
ctx.font="40px 微软雅黑";

//设置文字的对齐方式
ctx.textAlign="center";

//设置文字上下对齐方式
ctx.textBaseline="middle";

//设置带阴影的效果
ctx.shadowColor="red";
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowBlur=10;

ctx.strokeText("撸起袖子加油干", 300, 200);
ctx.fillText("撸起袖子加油干", 300, 200);

图片绘制

图片

//将图片绘制到画布的指定区域
var img=document.createElement("img");
	img.src="1.jpg";

img.onload=function(){
	//img,x,y 原图放置
	ctx.drawImage(img, 0, 0);

	//img,x,y,width,height 原图缩放放置
	ctx.drawImage(img, 100, 100,300,300);

	//img,sx,sy,swidth,sheight,x,y,width,height 原图裁剪缩放放置
	ctx.drawImage(img, 810,0,387,331,0,0,387,331);
}

解决绘制图片失真效果

var img=document.createElement("img");
	img.src="1.jpg";

img.onload=function(){
	var img_width=img.width;
	var img_height=img.height;
	var drowHeight=200*img_height/img_width;
	 	 	 
	ctx.drawImage(img, 100, 50, 200,drowHeight);
}

3D转换

平移

ctx.translate(100, 100);  //将原点位置移动到100,100
ctx.strokeRect(0, 0, 200, 100);

旋转

ctx.translate(100, 100);
ctx.rotate( Math.PI/2 );//将原点坐标旋转90度
ctx.moveTo(0, 0);
ctx.lineTo(200, 0);
ctx.moveTo(0, 0);
ctx.lineTo(0, 200);
ctx.stroke();

缩放

ctx.translate(300,200);
ctx.scale(0.5, 1);//延x轴缩小一半
ctx.arc(0,0,100,0,2*Math.PI);
ctx.stroke();

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接