Canvas标签

canvas标签:

canvas.html

<head>
    <script src="canvas.js"></script>
</head>
<body>
//只需要canvas.js
    <!--<canvas class="canvas" width="200px" height="200px">
</canvas>-->
</body>

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 = "<canvas id=\"mycanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\">"
    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";
}

推荐阅读更多精彩内容