canvas学习笔记1

##canvas

一.绘制line
    >1.选中canvas    var myCanvas.=document.querySelector("canvas");
    >2.获取绘制上下文        var ctx=myCanvas.getContext('2d');
    >3.移动画笔        ctx.moveTo(100,100);//画笔移动到100,100
    >4.绘制直线        ctx.lineTo(200,100);//绘制直线从100,100到200,100
    >5.描边        ctx.stroke();//显示直线

二.尺寸设置问题
    >1.尺寸不能在css style中设置
    css style中只是显示的大小,
    不是真实的大小,真实尺寸只能从属性中设置
    如<canvas width="600" height="400">
    </canvas> //此处无单位

三.线条
    >1.默认宽度1px
    >2.默认颜色黑色
    >3.canvas会自动在2px显示
    因此显示2px灰色线条
    >4.解决灰色问题往上下或左右移0.5px
    >5.ctx.lineCap属性线条帽子
    值有
    butt
    square 增加一块方形
    round 增加一块圆形
    >6.lineJoin
    值有
    bevel创建斜角
    round创建圆角
    miter创建尖角
    >7.设置虚线(用于绘制虚线)
    ctx.setLineDash(参数数组[5,6,10]实线和空线长度)
    >8.获取虚线数组
    ctx.getLineDash()
    >9.ctx.lineDsahoffset(参数设置偏移方向)
    正值向前偏移,负值向后偏移

四.描边颜色宽度
    >1.ctx.strokestyle='blue'设置蓝色
    >2.ctx.linWidth=10设置宽度
    >3.样式会覆盖
    >4.ctx.beginPath();开启新路径
    ctx.stroke();对一个路径生效

五.填充
    >1.ctx.fill();//填充
    >2.填充样式ctx.strockStye='#fff'颜色
    轨迹可以填充处理也可以描边处理

六.起始点问题
    >1.ctx.lineTo()会结束于线条中心点
    不会闭合
    >2.可以用在ctx.stroke()前使用ctx.closePath()
    进行闭合路径

七.填充规则(非零填充)
    >1.判断区域是否被填充,先拉一条直线
    >2.线条与直线相交
    >3.顺时针线条+1,逆时针线条-1
    >4.如果区域内结果不是0就会被填充,否则
    不被填充

八.成员
    >1.ctx.canvas.width宽度
    >2.ctx.canvas.height宽度

九.绘制矩形
    >1.ctx.rect(起点x,起点y,宽度,高度)无独立路径 会被覆盖
    >2.ctx.strokeRect(起点x,起点y,宽度,高度)有独立路径
    >3.ctx.clearRect(起点x,起点y,宽度,高度)擦除矩形

十.渐变方案
    >1.var LinearGradient=ctx.creatLinearGradient(起始x,起始y,结束x,结束y)
    创建一个渐变方案
    >2.LinearGradient.addColorStop(0,'pink')起始颜色
    LinearGradient.addColorStop(0.5,'red')中间颜色
    LinearGradient.addColorStop(1,'blue')结束颜色
    >3.把渐变方案赋值给填充样式ctx.fillStyle=LinearGradient
    >4.填充即可

声明:转载请注明出处,本人入门级菜鸟,内容大多学习于网络,存在问题太多不一一列举,大佬多多指教.本人QQ941131649