canvas的一些小知识点

canvas啊真是一个虐心又好用的东西,俗称为画板,在纸上画画不止一次,但是在电脑的画板上真心不是用笔那么简单的啊.....

接下来,不多说废话 来给告诉大家一些基础知识吧

//画直线

第一步:开始路径

ctx.beginPath();

第二步:设置起点

ctx.moveTo(100,100);

第三步:设置终点

ctx.lineTo(200,300);

修改线的颜色

ctx.strokeStyle = "blue";

修改线宽

ctx.lineWidth = 30;

第四步:绘制(修改颜色放在绘制下面是为了下一次的绘制)

ctx.stroke();

//画三角

ctx.beginPath();

ctx.moveTo(100,100);

ctx.lineTo(100,300);

ctx.lineTo(300,300);

闭合路径

ctx.closePath();

ctx.lineWidth = 20;

ctx.stroke();

填充(填充的是上一个闭合的图画并且会占这个图画线宽的一半)

设置填充颜色

ctx.fillStyle = "red";

进行填充

ctx.fill();

//1.空心矩形

ctx.strokeStyle = "orange";

ctx.strokeRect(100,100,100,100);

//实心矩形

ctx.fillStyle = "deeppink";

ctx.fillRect(100,100,100,100);

//画圆

//参数一:圆心x坐标

//参数二:圆心y坐标

//参数三:半径

//参数四:起始弧度

//参数五:结束弧度  Math.PI(180度)

//参数六:false(顺时针) true(逆时针)

ctx.arc(100,100,100,0,Math.PI,false);

ctx.closePath();

ctx.stroke();

椭圆采用了网上的一个简单的函数直接调用就好的

function EllipseOne(context, x, y, a, b) {

var step = (a > b) ? 1 / a : 1 / b;

context.beginPath();

context.moveTo(x + a, y);

for(var i = 0; i < 2 * Math.PI; i += step) {

context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));

}

context.closePath();

context.fill();

}

接下来展示一下自己画的哆啦A梦