HTML5 canvas绘制图形实例

---

HTML5绘制圆形

12-1.png

---

HTML5 moveTo与lineTo

12-2.png

---

使用bezierCurveTo绘制贝塞尔曲线

12-3.png

---

HTML5 Canvas 绘制渐变图形

13-1.png

    
    
    


绘制渐变图形,createLinearGradient(起始坐标点，结束坐标点)
addColorStop(offset,color)设定颜色，offset颜色距离起始点的偏移量

---

---

HTML5 Canvas 绘制径向渐变

13-3.png

---

HTML5 Canvas 绘制变形图形

13-2.png

---

Canvas 使用图像

微信截图.png

---

HTML5 Canvas 给图形绘制阴影

Stars in the sky

---

认识CreateJS

html部分：



    
    
    


    
    

js部分：
/**
 * Created by Administrator on 2018/1/8 0008.
 */

let canvas,stage,txt
let count = 0
window.onload = function () {
    canvas = document.getElementById("canvas")
    stage = new createjs.Stage(canvas)

    txt = new createjs.Text("number->","20px Arial","#ff7700")
    stage.addChild(txt)
    //设置监听，用来显示
    createjs.Ticker.setFPS(30)
    createjs.Ticker.addEventListener("tick",tick)

}
    function tick(e){
        count++
        txt.text = "bumber->" + count + "!"
        stage.update()
    }

---

使用Canvas制作炫酷的效果

HTML:



    
    


    
    

JS:
/**
 * Created by Administrator on 2018/1/8 0008.
 */


let canvas,stage
let img = new Image()
let sprite

window.onload = function () {
    canvas = document.getElementById("canvas")
    stage = new createjs.Stage(canvas)

    stage.addEventListener("stagemousedown",clickCanvas)
    stage.addEventListener("stagemousemove",moveCanvas)

    let data = {
        images:["2.png"],
        frames:{width:20,height:20,regX:10,regY:10}
    }
    sprite = new createjs.Sprite(new createjs.SpriteSheet(data))
    createjs.Ticker.setFPS(20)
    createjs.Ticker.addEventListener("tick",tick)
}
function tick(e){
    let t = stage.getNumChildren()
    for(let i = t-1;i>0;i--){
        let s = stage.getChildAt(i)

        s.vY+=2
        s.vX+=1
        s.x += s.vX
        s.y += s.vY

        s.scaleX = s.scaleY = s.scaleX+s.vS
        s.alpha+=s.vA

        if(s.alpha<= 0|s.y>canvas.height){
            stage.removeChildAt(i)
        }
    }
    stage.update()
}

function clickCanvas(e){
    adds(Math.random()*200+100,stage.mouseX,stage.mouseY,2)

}

function moveCanvas(e){
    adds(Math.random()*2+1,stage.mouseX,stage.mouseY,1)
}

function adds(count,x,y,speed){
    for(let  i =0;i