canvas学习（二）：渐变与曲线的绘制

canvas学习（二）：渐变与曲线的绘制

一：createLinearGradient()线性渐变:

二：createLinearGradient() 放射状/圆形渐变：

三：createPattern()使用图片，画布，video

注意： createPattern() 的第一个参数也可以是canvas对象，video对象

四：曲线的绘制

1、arc（）

实例：绘制圆角矩形

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.width = 800;
c.height = 800;
drawRoundRect(ctx,200,200,200,200,20);

function drawRoundRect(ctx,x,y,width,height,radius){
	ctx.save();
	ctx.translate(x,y);
	pathRoundRect(ctx,width,height,radius);
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.restore();
}
function pathRoundRect(ctx,width,height,radius) {
	ctx.beginPath();
	ctx.arc(width-radius,height-radius,radius,0,Math.PI/2);
	ctx.lineTo(radius,height);
	ctx.arc(radius,height-radius,radius,Math.PI/2,Math.PI);
	ctx.lineTo(0,radius);
	ctx.arc(radius,radius,radius,Math.PI,Math.PI*1.5);
	ctx.lineTo(width-radius,0);
	ctx.arc(width-radius,radius,radius,Math.PI*1.5,Math.PI*2);
	ctx.closePath();
}

　　

2：arcTo() ：介于两个切线之间的弧     传送门

3:quadraticCurveTo() :贝塞尔二次曲线   互动模拟

4:bezierCurveTo()：三次贝塞尔曲线   互动模拟

实例：画波浪线

function draw(ele,startX,startY,huduX,huduY,num,width,color) {
	var canvas = document.getElementById(ele)
	var ctx = canvas.getContext('2d')
	ctx.lineWidth = width;
	ctx.strokeStyle = color;
	for(var i = 0; i<num; i++){
		ctx.beginPath();
		var startPoint = {
			x: startX + (2*i*huduX),
			y: startY
		}
		var endPoint = {
			x: startPoint.x + (2*huduX),
			y: startY
		}
		console.log(startPoint)
		ctx.moveTo(startPoint.x, startPoint.y);
		ctx.bezierCurveTo(startPoint.x+huduX, startPoint.y-huduY,startPoint.x+huduX, startPoint.y+huduY,endPoint.x, endPoint.y);
		ctx.stroke();
	}
}
draw('myCanvas',100,100,100,50,3,10,'#000')

　　

实例2：草地

function draw2(){
	var canvas = document.getElementById('myCanvas')
	var ctx = canvas.getContext('2d')

	ctx.beginPath();
	ctx.moveTo(0, 600);
	ctx.bezierCurveTo(540, 400, 660, 800, 1200, 600);
	ctx.lineTo(1200,800)
	ctx.lineTo(0,800)
	ctx.closePath()

	ctx.fillStyle="green"
	ctx.fill();

}
draw2()