<Canvas>

<canvas>是一个可以使用脚本在其中绘制图形的 HTML 元素.它可以用于制作照片集、动画或者游戏

<canvas id="myCanvas" width="400" height="200">
    您的浏览器不支持canvas！
</canvas>

每个canvas元素都有一个对应的context对象

var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
}

原点(0, 0)位于图像左上角，x轴的正向是原点向右，y轴的正向是原点向下。

Canvas  图形

Canvas API

ctx.beginPath();         // 开始路径绘制
ctx.moveTo(20, 20);      // 设置路径起点，坐标为(20,20)
ctx.lineTo(200, 20);     // 绘制一条到(200,20)的直线
ctx.lineWidth = 2.0;     // 设置线宽
ctx.strokeStyle = "red"; // 设置线的颜色
ctx.lineTo(200, 100);
ctx.lineTo(20, 20);
ctx.stroke();           // 绘制线段
ctx.closePath();        // 关闭

line

Canvas API

ctx2.strokeRect(10,10,100,100);
ctx2.fillStyle = 'yellow';
ctx2.fillRect(30, 90, 200, 100);
ctx2.clearRect(100,50,50,50);//清除指定区域

rectangle

fillRect(x, y, width, height)

Canvas API

// 设置字体
ctx.font = "Bold 20px Arial";
// 设置对齐方式
ctx.textAlign = "left";
// 设置填充颜色
ctx.fillStyle = "#008600";
// 设置字体内容，以及在画布上的位置
ctx.fillText("ZhuBaJie.com",40,30);
// 绘制空心字
ctx.strokeText("猪八戒",50,30);

rectangle

ZhuBaJie.com

猪八戒

fillText(string, x, y)

Canvas API

//绘制实心圆
ctx.beginPath();
ctx.arc(60,60,50,0,Math.PI,true);
ctx.fillStyle= "#ff0000";
ctx.fill();

// 绘制空心圆
ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI*2, true);
ctx.lineWidth = 1.0;
ctx.strokeStyle = "#000";
ctx.stroke();

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

1弧度(rad)=57.29578度(°)

Canvas API

var myGradient = ctx.createLinearGradient(0, 0, 0, 160);
myGradient.addColorStop(0, "#BABABA");
myGradient.addColorStop(0.5, "#636363");

ctx.fillStyle = myGradient;
ctx.fillRect(10,10,150,180);

createLinearGradient(x1, y1, x2, y2)

Canvas  图像

Canvas API

drawImage(img, x, y)

var image = new Image();
image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
}
image.src = "test.jpg";

Canvas API

getImageData(0, 0, canvas.width, canvas.height)

var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
}
var image = document.getElementById('imgTest');
ctx.drawImage(image,0,0);
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
console.log(imageData);
for (var i=0;i<imageData.data.length;i+=4)
{
    imageData.data[i]=255-imageData.data[i];
    imageData.data[i+1]=255-imageData.data[i+1];
    imageData.data[i+2]=255-imageData.data[i+2];
    imageData.data[i+3]=255;
}
ctx.putImageData(imageData,0,0);

putImageData(imageData, 0, 0)

Canvas API

var imageAfter = new Image();
imageAfter.src = canvas.toDataURL("image/png");
document.getElementById('img-container').appendChild(imageAfter);

Canvas API

save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。

restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。

save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error

ctx.save();

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.5)";

ctx.fillStyle = "#CC0000";
ctx.fillRect(10,10,150,100);

ctx.restore();

ctx.fillStyle = "#000000";
ctx.fillRect(180,10,150,100);



ctx.save();

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.5)";

ctx.fillStyle = "#CC0000";
ctx.fillRect(10,10,150,100);

ctx.restore();

ctx.fillStyle = "#000000";
ctx.fillRect(180,10,150,100);

Canvas 动画

    var posX = 20,
        posY = 100;
    
    setInterval(function() {
        ctx.fillStyle = "black";
        ctx.fillRect(0,0,canvas.width, canvas.height);
    
        posX += 1;
        posY += 0.25;
    
        ctx.beginPath();
        ctx.fillStyle = "white";
    
        ctx.arc(posX, posY, 10, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
    }, 300);

https://simon.html5.org/dump/html5-canvas-cheat-sheet.html)

Canvas cheetsheet

HTML5梦工场

SVG

SVG 基本形状

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
<!--x、y为左上角坐标，width、height为宽高，rx、ry为圆角-->

<circle cx="25" cy="75" r="20"/>

SVG 基本形状

<ellipse cx="75" cy="75" rx="20" ry="5"/>

<!-- rx椭圆x轴半径
ry椭圆y轴半径
cx椭圆中心x轴的位置
cy椭圆中心y轴的位置 -->

SVG 基本形状

 <line x1="0" x2="100" y1="10" y2="150" stroke="blue"/>

SVG 基本形状

<polyline points="0 0, 65 65, 70 115" stroke="blue"/>

SVG 基本形状

<polygon points="50 160, 55 180, 70 180, 
60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

SVG 基本形状

<text x="10" y="10">Hello World!</text>

SVG 基本形状

<path d="M10 10 H 90 V 90 H 10 Z" 
fill="transparent" stroke="black"/>

SVG 基本形状

<path>元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。

<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>

SVG 基本形状

d属性的值是由一些点的坐标，以及控制这些坐标的命令组成的，它们一起描述了路径的形状。

M x y M命令仅仅是移动画笔

L x y (or l dx dy)L命令将会在该点和当前点（L前面画笔所在的点）之间画一条线段

H x (or h dx) V y (or v dy) H，绘制平行线。V，绘制垂直线。

Z (or z)Z命令会从当前点画一条直线到路径的起点

http://www.cheat-sheets.org/own/svg/index.xhtml

What's More?

动效设计

3D翻转效果

实体街景等

模型

http://carvisualizer.plus360degrees.com/threejs/

Canvas SVG WebGL,三者在前端工程中的应用,在互联网行业,国内外多数使用前两种配合来实现数据表的展示

ECharts  

HighCharts

D3.js

Three.js 

......

Phaser

实现HTML5游戏，营销推广小游戏

围住神经猫

Flappy bird

1024

《独立游戏大电影》

homework

1.观看《独立游戏大电影》（选做）

2.通过资料搜索，实现一个Canvas刮刮卡效果

canvas宽度600*300