Canvas标签
2015-09-02 本文已影响63人
机器猫的百宝袋
canvas标签：
- <canvas>元素用于图形的绘制，通过脚本(通常是javaScript)来完成
- <canvas>标签只是图形容器，必须用脚本来绘制图形
- 可通过多种方法使用Canvas绘制路径、盒、圆
API：
https://developer.mozilla.org/zh-CN/
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
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";
}
