canvas基础知识

使用场景

canvas对象是像素级的，适用于高密集的游戏开发，动态渲染和量大级处理

缺点

需要使用js来操作。
canvas使用多了，会造成内存过多，导致游览器崩溃。
canvas是由像素点构成的，放大会失真模糊。

使用方法和注意事项

只有宽高两个属性，若是不设计，会给默认宽300px高150px 然后通过获取元素获取这个元素，例

let ctx =getElementById('aa')
//通过ctx.getContext()来判断游览器是否可以使用canvas
if (！ctx.getContext()) return

属性

canvas有多种画图方法：

路径画图

    ctx.getContext('2d')
    //首先 ctx.beginPath()开始
    ctx.beginPath()
    //这就相当于一个画笔拿起来移动到另一个位置，画布上不会留下痕迹。
    ctx.moveTo(x,y)
    
    //这是画直线的,可以多次图像会自动连接
    ctx.lineTo(x,y)
    
    //画圆,radius是 ，后面两个是弧度，最后一个是默认false顺时针。
    //弧度整个圆为2Math.PI,一共360个。
    ctx.arc(x,y,radius,startAngle,endAngle,false)
    
    //这是填充默认会闭合图像
    ctx.fill()
    //这是边框里面没有填充，不会默认闭合
    ctx.stroke()
    //非必须,但是没有会影响下一次画图的起始位置
    ctx.ClosePath()

好像是基础的

fillRect(x,y,width,height)从坐标（x,y）处画一个矩形。 stokeRect（）属性如上，画一个矩形边框。 cleanRect（）清除范围内的的canvas图表。

canvas的样式属性

有fillWidth和stokeWidth，代表宽度
fillStyle和stokeStyle，是颜色，可以用rgb或者rgba，这个类似于css，下面覆盖上的属性。
gobalAlpha：0-1 是透明度，影响全局。

线条也有属性

lineCap=butt（默认，截断）,round（圆形）,square（正方形）
lineJoin=（bevel，斜角），（round，圆形），（miter，斜槽角）

宽度为1px不精准的原因是因为，设计是中间开始，左右各0.5px，然后再在两侧外面又补上0.5px的浅色

解决办法：设计个基数，让他平移到格子中间。

绘制文本

fillText（text，x，y，maxweight）
stokeText（text，x，y，maxweight）

样式

字体：font= value，默认 10px sans-sirif
文本对齐：textAlign =value 默认start 还有end，center，left，right
基线对齐：textBaseline =value 很多，自己去找吧，不想打了

绘制图片

drawImage（）

有属性image，x，y，width，height，前3个必选，后面可选。

或者drawImage（image，sx，sy，swidth，sheight，dx，dy，dwidth，dheight），前4个是对图片的，后四个是对显示位置的。

好像要在

image.preload=function(){
//这里面写
}

最后了

他也有css的transform（矩阵），scale（），rotate（弧度），translate（）的方法然后可以用ctx.save进行保存ctx.restore进行取出，就是栈的进出。

他也有动画效果，就是settimeout和setinterval和requestAnimationFrame等方法来通过重绘修改，因为所有的动画都是一个个片段变换，然后在人的眼睛看到是会动的。写法大概是：

清除之前的画布内容
保存当前状态
修改canvas
回到之前的状态

这样有利于帮助你找到当前的x,y轴，其实可以先设计根节点旋转，这样当别的依附于这个节点时也会根着旋转。

PS.一点昨天的css基础漏了一个属性backface-visibility：vibility和hidden两个属性，就是背面是否可见，用过设计软件的同学都懂吧。

可视化-02