canvas

一、canvas简介

Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图(bitmap)。

Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

二、canvas使用

 1.canvas元素

<canvas id="canvas"></canvas>

说明：canvas看似是一个标签，默认大小宽300px，高150px,可通过在canvas内直接定义宽高，也可以在脚本语言内定义宽高，但如果通过css样式定义的话，有可能出现比例差错导致扭曲。

2.在脚本语言中定义宽高

    var canvas = document.querySelector("#canvas");
    canvas.width = 800;
    canvas.height = 400;

3.canvas渲染2d模型——getContext

将画布转换为2d的效果。

 var content = canvas.getContext("2d");

三、绘制形状
1.矩形

 content.fillStyle="red";
 content.fillRect(0,0,200,100);
 content.fill();

2.圆

     content.fillStyle="red";
     content.arc(200,200,100,0,Math.PI,false);
     content.fill();

3.线   

     content.strokeStyle="green";
     content.fillStyle="red";
     content.lineWidth=20;
     content.moveTo(100,100);
     content.lineTo(300,100);
     content.lineTo(120,250);
     content.lineTo(200,0);
     content.lineTo(270,250);
     content.lineTo(100,100);
     content.lineTo(300,100);
     content.stroke();
     content.fill();

4.圆形渐变

     content.beginPath();
     var rad = content.createRadialGradient(200,200,0,200,200,100);
     rad.addColorStop(0.1, "red");
     rad.addColorStop(0.2, "green");
     rad.addColorStop(0.3, "yellow");
     rad.addColorStop(0.4, "blue");
     rad.addColorStop(0.5, "#fff");
     rad.addColorStop(0.6, "orange");
     rad.addColorStop(0.7, "silver");
     rad.addColorStop(0.8, "red");
     rad.addColorStop(0.9, "green");
     rad.addColorStop(1, "blue");
     content.fillStyle = rad;
     content.arc(200, 200, 100, 0, Math.PI * 2, true);
     content.fill();
     content.closePath();

5.线性渐变   

     content.beginPath();
     var rad = content.createLinearGradient(200, 100, 200, 300);
     rad.addColorStop(0.1, "red");
     rad.addColorStop(0.2, "green");
     rad.addColorStop(0.3, "yellow");
     rad.addColorStop(0.4, "blue");
     rad.addColorStop(0.5, "#fff");
     rad.addColorStop(0.6, "orange");
     rad.addColorStop(0.7, "silver");
     rad.addColorStop(0.8, "red");
     rad.addColorStop(0.9, "green");
     rad.addColorStop(1, "blue");
     content.fillStyle = rad;
     content.arc(200, 200, 100, 0, Math.PI * 2, true);
     content.fill();
     content.closePath();

6.字体

    var rad = content.createLinearGradient(0, 0, 0,100);
    rad.addColorStop(0.1, "red");
    rad.addColorStop(0.2, "green");
    rad.addColorStop(0.3, "yellow");
    rad.addColorStop(0.4, "blue");
    rad.addColorStop(0.5, "#fff");
    rad.addColorStop(0.6, "orange");
    rad.addColorStop(0.7, "silver");
    rad.addColorStop(0.8, "red");
    rad.addColorStop(0.9, "green");
    rad.addColorStop(1, "blue");
    content.fillStyle = rad;
    content.font="100px STheiti, SimHei";
    content.fillText("我爱canvas",0,100);
    content.fill();

7.图片

    var img=new Image();
    img.src="./img/1.jpg";
    content.drawImage(img,30,30,100,100,200,100,200,100);

8.清除

    content.fillStyle="red";
    content.fillRect(0,0,200,200);
    content.fill();
    content.clearRect(50,50,100,100); 

四、简单画布实例 

1.body部分：主要实现画笔，直线，画圆，清除等功能。

画笔：画笔部分具有8种像素大小，可改变画笔粗细。

<div class="gongju">
    <button id="line">笔</button>
    <button id="linelist">线</button>
    <select id="fontsize">
        <option value="1">1px</option>
        <option value="2">2px</option>
        <option value="3">3px</option>
        <option value="4">4px</option>
        <option value="5">5px</option>
        <option value="6">6px</option>
        <option value="7">7px</option>
        <option value="8">8px</option>
    </select>
    <input type="color" id="color"/>
    <button id="xiang">橡皮</button>
    <button id="yuan">圆</button>
</div>
<canvas id="canvas"></canvas>

2.脚本语言

 

var canvas = document.getElementById("canvas");
    var line = document.querySelector("#line");
    var fontsize = document.querySelector("#fontsize");
    var color = document.querySelector("#color");
    var linelist = document.querySelector("#linelist");
    var xiang = document.querySelector("#xiang");
    var yuan = document.querySelector("#yuan");
    canvas.width = screen.availWidth;
    canvas.height = screen.availHeight - 100;
    var content = canvas.getContext("2d");
    var way = "";
    var fontbig = 1;
    var bgcolor = "black";
    fontsize.onchange = function () {
        fontbig = this.value;
    }
    color.onchange = function () {
        bgcolor = this.value;
    }
    line.onclick = function () {
        way = "line";
    }
    linelist.onclick = function () {
        way = "linelist";
    }
    xiang.onclick = function () {
        way = "xiang";
    }
    yuan.onclick = function () {
        way = "yuan";
    }
    canvas.onmousedown = function (e) {
        var x = e.pageX;
        var y = e.pageY - 100;
        switch (way) {
            case "line":
                content.beginPath();
                content.strokeStyle = bgcolor;
                content.lineWidth = fontbig;
                content.moveTo(x, y);
                break;
        }
        this.onmousemove = function (event) {
            switch (way) {
                case "line":
                    content.lineTo(event.pageX, event.pageY - 100);
                    content.stroke();
                    break;
                case "linelist":
                    content.beginPath();
                    content.clearRect(0, 0, screen.availWidth, screen.availHeight - 100);
                    content.moveTo(x, y);
                    content.lineTo(event.pageX, event.pageY - 100);
                    content.stroke();
                    break;
                case "xiang":
                    content.clearRect(event.pageX - 5, event.pageY - 100 - 5, 10, 10);
                    break;
                case "yuan":
                    content.clearRect(0, 0, screen.availWidth, screen.availHeight - 100);
                    content.beginPath();
                    if (event.pageX - x > 0 && event.pageY - 100 - y > 0 || event.pageX - x < 0 && event.pageY - 100 - y < 0) {
                        content.arc(Math.abs(x + (event.pageX - x) / 2), Math.abs(y + (event.pageX - x) / 2), Math.abs((event.pageX - x) / 2), 0, Math.PI * 2, true);
                    }
                    else {
                        content.arc(Math.abs(x + (event.pageX - x) / 2), Math.abs(y - (event.pageX - x) / 2), Math.abs((event.pageX - x) / 2), 0, Math.PI * 2, true);
                    }
                    content.stroke();
                    content.closePath();
                    break;
            }
        }
    }


    canvas.onmouseup = function () {
        way = "";
        this.onmousemove = null;
    }
    canvas.onclick = function (e) {
        var x = e.pageX;
        var y = e.pageY;
        if (content.isPointInPath(x, y)) {
            console.log(1);
            content.fillStyle = "red";
            content.fill();
            content.translate(200, 200);
        }
        else {
            console.log(2);
        }
    }

以上代码可实现简单画图功能。