Canvas标签

canvas标签：

• 元素用于图形的绘制，通过脚本(通常是javaScript)来完成
• 标签只是图形容器，必须用脚本来绘制图形
• 可通过多种方法使用Canvas绘制路径、盒、圆
  API：
  https://developer.mozilla.org/zh-CN/
  https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

canvas.html

    


//只需要canvas.js
    

canvas.js

www.createjs.com
EASELJS->H5.canvas
TWEENJS->动画调整、js属性
SOUNDJS->处理音频相关

var CANVAS_WIDTH = 900, CANVAS_HEIGHT = 900;
var mycanvas,context;
window.onload = function(){
    createCanvas();//创建画布
    //drawRect();//绘制图形
    drawImage();//绘制图像
}

//创建画布
function createCanvas(){
    document.body.innerHTML = ""
    mycanvas = document.getElementById("mycanvas");
    context = mycanvas.getContext('2d');
}

//绘制图形
function drawRect(){
    context.fillStyle = "green";
    //context.rotate(45);//旋转
    context.translate(500,500);//位移  画布要大
    context.scale(0.5,2);//
    context.fillRect(0,0,200,200);//填充
}

//绘制图像
function drawImage(){
    var img = new Image();
    img.onload = function(){
        context.drawImage(img,0,0)
    }
    img.src = "dog.jpg";
}