cavans画布

曾经终败给现在 2022-11-07 14:31 11阅读 0赞

## cavans画布 ##

var canvas=document.getElementById('')//获取元素 
    var ctx =canvas.getContent("2d")//定义画笔有了绘画功能

> 注意：**填充颜色必须在填充矩形之前**

1.`ctx.globalAlpha=0.2` 设置透明度  
2.`ctx.strokeStyle='rgba(225,0,0,0,0.5)` 边框的颜色  
3.`ctx.fillStyle=rgba(255,0,0,0.5)`填充样式  
4.`lineWidth=2`线条宽度  
5.`lineCap=type`设置线条末端样式 butt平行 ，round圆角（多出半圆的长度）square加上线宽一半高的矩形  
6.`lineJoin=type`设定线条与线条间接合处的样式，round圆角 bevel 平角 miter直线  
8、`miterLimit = value`限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。交点锯齿的起伏

9、`getLineDash()`返回一个包含当前虚线样式，长度为非负偶数的数组。

10、`setLineDash(segments)`设置当前虚线的样式

11、`lineDashOffset = value`设置虚线样式的起始偏移量

12、`createLinearGradient(x1, y1, x2, y2)` 渐变

13、shadowOffsetX = float//shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0

14、shadowOffsetY = float

15、`shadowBlur = float`shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0

16、shadowColor = color //shadowColor = color

17、`save() restore()`save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照

18、`ctx.translate(100,0)`平移

19、`ctx.scale(0.75,0.75)`缩放

20、`ctx.rotate(angle)`偏移角度

21、`transform(m11, m12, m21, m22, dx, dy)`  
m11：水平方向的缩放

m12：水平方向的偏移

m21：竖直方向的偏移

m22：竖直方向的缩放

dx：水平方向的移动

dy：竖直方向的移动

m11 m21 dx  
m12 m22 dy  
0 0 1

22、setTransform(m11, m12, m21, m22, dx, dy) //设置矩阵

23、ctx.setTransform(1, 0, 0, 1, 0, 0); 重置当前变形为单位矩

//检查是否支持画笔属性

if(canvas.getContext){ 
    var ctx= canvas.getContent('2d');
    
    }else{ 
    console.log("该浏览器不支持canvas")
    }

#### 绘制形状 ####

canvas提供了三种方法绘制矩形：

> 1.fiilRect(x,y,width,height) //绘制一个填充矩形

> 2.strokeRect(x,y,width,heigth) //绘制一个矩形边框

> 3.clearRect(x,y,width,height) //清除指定矩形区域，让清除部分完全透明 （canvas 部分清除颜色）相当与橡皮擦功能

圆弧arc  
**绘制圆弧**  
圆弧也是绘制路径，也需要设置绘制的起点beginPath()和绘制路径stroke()

//创建一个路径
        ctx.beginPath();
        ctx.arc(100, 100, 100, 0, 6, false);//圆心的x坐标，圆心的y坐标，圆半径，线条起始点，线条结束点，false顺时针，true逆时针
        ctx.stroke();

**绘制文字**  
canvas画布上面的文字都是图片，是画上去的，不是写上去的；fillText()方法在画布上绘制填色的文本。文本的默认颜色是黑色。  
:context.fillText(text,x,y,maxWidth);maxWidth是可选的，  
**使用图片**

//创建一个image元素
        var image = new Image();
        //用src设置图片地址
        image.src = "images/1.jpg";
        //必须用onload来加载渲染
        image.onload = function (){ 
          //ctx.drawImage(image, 10, 100);//10，100为图片的左上角对应的画布的xY坐标
          //ctx.drawImage(image, 10, 100, 200, 200);//200，200是图片的宽高
          ctx.drawImage(image, 0, 0, 200, 120, 50, 50, 50, 50);
          //200,120是用来切图的，切下来之后再进行渲染，再进行位置变形等操作//ctx.drawImage(image, 10, 100, 200, 200);//200，200是图片的宽高
        }

渐变

//渐变
    var lineargradient = ctx.createLinearGradient(0,0,150,150);
    lineargradient.addColorStop(0,'white');
    lineargradient.addColorStop(1,'black');
    ctx.fillStyle = lineargradient

绘制路径

beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。 \*\*\*\*\*不管是直线还是圆形线 都要调用这个方法

closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。 \*\*\*\*\*每次绘制一段路径的完成时都要调用此方法，然后重新绘制的时候在调用beginPath();

fill() 通过填充路径的内容区域生成实心的图形

stroke() 通过线条来绘制图形轮廓

fill() stroke() 两个方法的区别是一个是轮廓一个是 填充

线 line

moveTo(x,y) 起点 每次绘制只有一个

lineTo(x,y) 终点 可以有多个

#### 画布执行动画 ####

//画布每次执行动画都要 清屏-更新-渲染
     setInterval(function(){ 
          //清屏
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          //更新方法
          r1.update(); //r1 跟 r2是定义的两个实例
          //渲染
          r1.render();
          //更新方法
          r2.update();
          //渲染
          r2.render();
        },10)