html5 g标签,[H5]HTML5标签<canvas>

[H5]HTML5标签

包括创建canvas、canvas绘制图形、canvas绘制图片和createJS介绍。

[index.html]

Canvas标签

#canvasID {

width: 400px;

height: 400px;

background-color: #66CCFF;

}

#divID {

width: 500px;

height: 500px;

background-color: cadetblue;

}

#canvasID1 {

width: 400px;

height: 400px;

background-color: #FF0000;

}

[indexJS.js]

var C_WIDTH = 500;

var C_HEIGHT = 500;

var myCanvas;

var context;

// CreateJS

var canvas;

var stage;

var text;

var count = 0;

window.onload = function () {

createCanvas();

drawImgAction();

createjsAction();

}

// 创建canvas

function createCanvas () {

var tempDiv = document.getElementById("divID");

tempDiv.innerHTML = "";

myCanvas = document.getElementById("myCanvas");

context = myCanvas.getContext("2d");

drawRectAction();

}

// 绘制图形

function drawRectAction () {

// 默认颜色是黑色，这个属性能改变颜色

context.fillStyle = "#66ccff";

// 移动

context.translate(200,100);

// 旋转

context.rotate(45);

// 缩放

context.scale(2,0.5);

// 绘制矩形

context.fillRect(0,0,200,200);

}

// 绘制图片

function drawImgAction () {

var img = new Image();

img.onload = function () {

var tempCanvas = document.getElementById("canvasID");

var tempContext = tempCanvas.getContext("2d");

tempContext.drawImage(img, 0, 0);

}

img.src = "55555.jpg";

}

// CreateJS

function createjsAction () {

canvas = document.getElementById("canvasID1");

stage = new createjs.Stage(canvas);

text = new createjs.Text("num:0","20px arial","#66ccff");

stage.addChild(text);

createjs.Ticker.setFPS(30);

createjs.Ticker.addEventListener("tick",tickAction);

}

function tickAction (ev) {

count ++;

text.text = "num:"+count;

stage.update();

}

示意图：