canvas ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 7 天创建元素抱歉，你的浏览器版本不支

这是我参与「第五届青训营」伴学笔记创作活动的第 7 天

创建元素

抱歉，你的浏览器版本不支持canvas

中间文字：不支持的时候canvas变成普通元素，中间字会显示

canvas是行内元素，不能用margin auto，需要margin加一个父元素或者display: block;

所有东西都用原生，不要用jquery

var canvas = document.getElementById('myCanvas');获取

直线

 var ctx = canvas.getContext('2d');
 function drawline(beginx,beginy,endx,endy,color,width){
 ctx.beginPath();
 ctx.moveTo(beginx,beginy);
 ctx.lineTo(endx,endy);
 ctx.strokeStyle=color;
 ctx.lineWidth=width;
 ctx.stroke();
 ctx.closePath();
 }

第一行获得画笔，注意：没有3d,3d去学three.js

最好像这样封装成函数，免去麻烦

beginPath();开启路径，c.moveTo(100,100);起点c.lineTo(100,200);终点c.stroke();上色 c.closePath();关闭路径

beginPath()默认在前面加了个closePath()，所以多个beginPath()可以只写一个closePath()

注意：c.strokeStyle一定在c.stroke();之前

c.lineWidth不用加px是，默认px

第二种直线画法：在第五行后面加很多lineTo，可以连用

虚线setLineDash(segments)

// segments 一个数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字

统计图

 //坐标系
 ……
 ctx.moveTo(100,100);
 ctx.lineTo(100,400);
 ctx.lineTo(400,400);
 ……
 //统计图
 for (let index = 0; index < 7; index++) {
     var height=Math.random()*280+10
   ctx.fillRect(120+40*index,400-height,20,height)      
 }

有一个地方很重要：

fillRect从左上角画到右下角，所以画统计图的时候起始点是动点（400（左下角坐标y轴）-height），不是定点，定点会反过来

随机颜色parseInt(Math.random()0xffffff).toString(16)，其中Math.random() 0xffffff可以改成别的变量

clearRect()橡皮擦，相当于特殊的fillRect，动画效果必用：清楚整个页面

画圆

ctx.arc(x,y,r,0,Math.PI*2,false);

起始点x，y，起始角度，终点角度，false是顺时针

画出来的是路径不是像素，需要stroke()实体化

画圆弧

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

错误，这样会出现多余的线，必须在二者之间加beginPath();

画椭圆

  ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

碰撞检测

 setInterval(() => {
 ctx.clearRect(0,0,500,500);
     drawcycle(x,y,r,5);
     x+=xSpeed;
     y+=ySpeed;
  if(x-r<=0||x+r>=w)
  {
     xSpeed*=-1;
  }
  if(y-r<=0||y+r>=h)
  {
     ySpeed*=-1;
  }
 
 }, 10);

对象小球

  var ballArr = [];
     for (let i = 0; i < 10; i++) {
         var ball = new Ball();
         ballArr.push(ball);   
     }

数组存储小球，方便寻找

文字

ctx.fillText(text,x,y,maxwidth)

用font属性修改，与css font相同

图片

 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

canvas.width = document.documentElement.clientWidth-6;

canvas.height = document.documentElement.clientHeight-6;

这两行代码可以把canvas的宽高改成屏幕的

按像素获取

getImageData()putImageData()

像素坐标

data数据：0-3，4-7，8-11……四个代表一个像素点的rgba

像素点顺序=data数据/4=像素坐标x+y*每行的像素个数

像素坐标=（像素点顺序mod（每行的像素个数），像素点顺序/每行的像素个数）

像素图片/文字的制作

首先，再画布上引入图片/文字，第二步，获取所有像素点数据。第三步清楚画布。第四步判断每个点是否不透明度大于128，最后大于就画点。

四，五步代码

 for (let y = 0; y < h; y+=leap) {
     for (let x = 0; x < w; x+=leap) {
        var index=x+y*w;
         var a=copy.data[index*4+3];
         if(a>128)
         {
             drawball(x,y,1,'skyblue');
         }
     }
 }

动态像素

确定起始点，终点，运动时间。求出速度。然后将随机的小点移动到目标位置。

canvas ｜ 青训营笔记