[H5]HTML5标签<canvas>

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

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas标签</title>
    <style>
        #canvasID {
            width: 400px;
            height: 400px;
            background-color: #66CCFF;
        }
        #divID {
            width: 500px;
            height: 500px;
            background-color: cadetblue;
        }
        #canvasID1 {
            width: 400px;
            height: 400px;
            background-color: #FF0000;
        }
    </style>
    <script src="easeljs.min.js"></script>
    <script src="indexJS.js"></script>
</head>
<body>
    <!--什么是 Canvas？-->
        <!--HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。-->
        <!--画布是一个矩形区域，您可以控制其每一像素。-->
        <!--canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。-->
        <!--canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。-->

    <!--创建Canvas标签-->
        <!--<canvas id="myCanvas" width="200" height="100"></canvas>-->
        <canvas id="canvasID"></canvas>
        <div id="divID"></div>

    <!--绘制图形/绘制图片-->
        <!--帮助文档 https://developer.mozilla.org/zh-CN/-->

    <!--绘制图形CreateJS库文件-->
        <!--官网：https://www.createjs.com/-->
        <!--EASELJS 主要处理HTML的canvas-->
        <!--TWEENJS 处理HTML动画-->
        <!--SOUNDJS 处理音频-->
        <!--PRELOADJS 加载一些类库-->
    <canvas id="canvasID1"></canvas>
</body>
</html>

[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 = "<canvas id=\"myCanvas\" width=\""+C_WIDTH+"\" height=\""+C_HEIGHT+"\"></canvas>";
    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();
}

示意图：

[H5]HTML5标签<canvas>

猜你喜欢