canvas学习笔记，实用知识点总结（上）

一、基本使用规则

1.创建画布

2.创建绘图对象

3.开始位置（画一条线当lineWidth特别大的时候起始点从这条线的左下角开始的）

4.结束位置

5开始画图

注意：canvas标签是不能在css中设置的，在标签上面设置width和height属性，值为不带px的数值;

栗子一：画一条直线

//1.画一条线
var c = document.querySelector("canvas”);//创建画布
var ctx = c.getContext("2d"); //获取绘图对象，一个画布对应一个绘图对象
ctx.moveTo(100,100);
ctx.lineTo(300, 100);
ctx.strokeStyle = "green”;//设置线的颜色
ctx.lineWidth = 5;//设置线的宽度
ctx.stroke();//绘制

栗子二：再画一条线

ctx.beginPath();//重置路径;
ctx.moveTo(100,100);
ctx.lineTo(300, 100);
//ctx.setLineDash([20,10]);//虚线参数解析：是一个数组，线的长度，空白部分
ctx.strokeStyle = "green”;//设置线的颜色
ctx.lineWidth = 5;//设置线的宽度
ctx.stroke();//绘制

效果：第一条线也被重新画了一次；

问题解决：

1.只写一次ctx.stroke();

2.第二次画线前调用:ctx.beginPath();

栗子三：线的连接方式与结束方式;

//连接方式（lineJoin用于设置连接处样式）

//线帽：lineCap用于设置线两端结束的方式

//连接方式（lineJoin用于设置连接处样式）
//线帽：lineCap用于设置线两端结束的方式   
ctx.moveTo(100, 400);
ctx.lineTo(300, 500);
ctx.lineTo(100, 600);
ctx.strokeStyle = "red";
ctx.lineWidth = 10;
ctx.lineJoin = "miter"; //round—bevel—miter(默认)
ctx.lineCap = "butt"; //round---square---butt（默认）
ctx.stroke();

栗子四：画一个三角形（知识点:闭合路径）

var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(100, 100);
ctx.lineTo(100, 300);
ctx.lineTo(400, 300);
ctx.lineTo(100, 100);
ctx.closePath();//闭合路径
ctx.lineJoin = "miter";
ctx.strokeStyle = "green";
ctx.lineWidth = 10;
ctx.stroke();

栗子五：线型渐变

var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
//创建渐变方案（lgd）
var lgd = ctx.createLinearGradient(100,100,500,100);//起始位置的横纵坐标，结束位置的横纵坐标
lgd.addColorStop(0,"red");//添加渐变颜色，参数解析：第一个参数:相当于百分比的进度（0～1），第二个参数：颜色
lgd.addColorStop(1,"green");
ctx.strokeStyle = lgd;//将渐变方案赋给strokeStyle
ctx.moveTo(100, 100); //毕竟是要画线还是要有起始点的
ctx.lineTo(500, 100);
ctx.lineWidth = 20;
ctx.stroke();

栗子六：径向渐变（知识点：给闭合图形进行填充样式，这里填充为景象渐变）

var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
//创建渐变方案（lgd）
//参数解析：起始园的圆心横纵坐标及半径，结束园的圆心横纵坐标以及结束圆的半径
var rgd = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);
//添加渐变颜色
rgd.addColorStop(0, "red”);
rgd.addColorStop(0.5, “yellow");
rgd.addColorStop(1, "green");

ctx.fillStyle = rgd;//设置填充样式
// ctx.rect(0, 0, 200, 200);//画矩形
ctx.arc(100,100, 100, 0, Math.PI*2);//画圆
// ctx.moveTo(100, 50);
// ctx.lineTo(300, 50);
// ctx.lineTo(300, 300);
// ctx.lineTo(100, 300);
// ctx.closePath();
ctx.fill();//填充

栗子七：非零环绕问题

var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
//顺时针
ctx.moveTo(0,0);
ctx.lineTo(200,0);
ctx.lineTo(200,200);
ctx.lineTo(0,200);
ctx.lineTo(0,0);
//逆时针
ctx.moveTo(50,50);
ctx.lineTo(50,150);
ctx.lineTo(150,150);
ctx.lineTo(150,50);
ctx.lineTo(50,50);
ctx.fillStyle = "green";
ctx.fill();

效果如下：

栗子八：制作动画矩形（知识点：清理画布）

思路：每隔10毫秒清除画布，重新在新的位置画一个新的矩形；

var c = document.querySelector("canvas");
var ctx = c.getContext("2d");
var x = 0;//开始坐标
var step = 5;//每次移动步数
var i =1;//标记(设置矩形左右移动后再回来)
setInterval(function(){
    //清理画布
    ctx.clearRect(0, 0, c.width, c.height);
    //绘制动画矩形
    ctx.fillStyle = "green";
    ctx.fillRect(x,100,100,200);//横、纵坐标，宽、高
    ctx.stroke();

    x += step * i;//控制横坐标
    if (x >= c.width - 100) {
        i = -1;
    } else if(x <= 0) {
        i = 1;
    }
}, 10)

canvas学习笔记，实用知识点总结（上）

猜你喜欢