萌新的Canvas笔记(一)

Canvas基础

前言
一放暑假本来要好好学习的，万万没想到跟基友打守望先锋根本停不下来，导致日夜颠倒。

都是暴雪的错！所幸历时十几天，今天终于调整回来，继续当一名爱学习的宝宝。

正片开始

首先获取到canvas节点后还需获取canvas的上下文环境

context = canvas.getContext(‘2d’)

moveTo与lineTo

moveTo(x, y) 移动画笔到某个位置
lineTo(x, y) 从当前位置到指定位置画一条直线

stroke()

指定好绘制的状态后，调用context.stroke()将状态绘制出来
strokeStyle = 'blue' 属性可以制定颜色

beginPath()

Canvas的绘制是基于状态的，每次调用stroke()，都会将所有的状态绘制一遍
也就是说，后面新加的状态会覆盖前面的。

如果要指明两个不同的绘制过程，需要调用context.beginPath()，表示这是一个
新状态的开始。

当刚刚调用beginPath()时，这时画笔的初始位置为‘无’，注意，‘无’并不是
指位置为(0,0),而是‘没有’，这时候moveTo与lineTo的效果一样，后面会用到
这个特性。

关于绘制封闭的多边形

当使用moveTo与lineTo绘制一个封闭多边形时，如果线条宽度比较大（大于1个像素），可能会出现
衔接不完美的问题。

这时候一个比较标准的做法是将绘制过程放在beginPath()与closePath()之间。
closePath()表示状态结束并且封闭，如果绘制的图形不封闭，closePath()也
会自动将图形封闭起来。

填充与填充色

fillStyle = 'yellow' 属性指定填充色
fill()           填充图像

注意，当图形有边框时，填充色会覆盖内部的一半边框，解决方案是先填充再描边

矩形、覆盖和透明色

rect(x, y, width,height)

fillRect(x, y, width, height)

strokeRect(x, y, width, height) //你这么聪明应该知道这三个什么意思

后绘制的图形，会把先绘制的图形覆盖。

对于fillStyle与strokeStyle属性，可以赋予的值类型有：
    1.#ffffff
    2.#642
    3.rgb(255, 128, 0)
    4.rgba(100, 100, 100, 0.8)
    5.hsl(20, 62%, 28%)
    6.hsla(40, 82%,33%, 0.6)
    7.red

将fillStyle赋值为透明色时候，在遮挡关系上就可以看到后面的颜色

lineCap

lineCap  线条的帽子，值线条两端的样式，取值可以是：
        1.butt   //这是默认的
        2.roud
        3.square

大概长这样

注意线段的两端有区别
什么？不够清楚？
那这样

这个属性只对线段的开始和结尾处有用，在线段与线段的衔接处没有改变

lineJoin与miterLimit

    lineJoin表示线条衔接处的样式，可以有三个取值
        1.miter（默认，显示为尖角）
        2.bevel（表示会将尖角折叠起来）
        3.round（在衔接处用一个弧形过度）

    miterLimit
        1.这个属性的值有一个计算方式，可以简单理解为尖锐程度
        2.默认值是10，当尖锐程度超过这个值时，就会以bevel的方式来展现

---

暂时先这样