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()

巴特西

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

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

最新文章

热门文章