HTML5 — canvas

一、html5是什么？

        html5是html的一个版本（最新），它在html4的基础上进行了修正，并且提供了一些新技术，包括本地存储（sessionStorage、localStorage）、canvas、离线缓存、websocket等。

二、一阶段html5的内容

        新的标签：     

nav
header
section
footer
figure
video
audio

        新的属性：

placeholder    提示文字

required    必须的
例：<input type="text" required>    //submit验证不能为空

autocomplete
pattern    正则

        新的值：

input type属性：
    color
    email
    number
    ...

三、canvas介绍

1、canvas是什么？

        HTML<canvas>标签用于通过脚本（通常是JavaScript）动态绘制图形。

2、canvas的使用

        1)、html中定义一个canvas标签

<canvas id = "myCanvas" height="" width=""></canvas>

注：canvas的宽高在样式里面设置无效，只能在属性里面设置

        2)、js中获取canvas，得到canvas上下文，调用对应的属性和方法

let context = $("#mycanvas").getContext("2d");

四、canvas绘制图形

        1、绘制直线

function drawLine(){
    context.moveTo(0,0);    //设置起点x,y
    context.lineTo(500,300);    
    context.lineWidth = 5;
    context.strokeStyle = "red";
    context.stroke();    //绘制（连线）
}

        2、绘制矩形

function drawRect(){
    context.strokeStyle = "red";
    context.lineWidth = 2;
    context.strokeRect(50,50,100,50);    //矩形
    context.fillStyle = "green";
    context.fillRect(50,50,100,50);
}

        3、绘制弧度

function drawArc(){
    //arc参数：圆心x坐标、圆心y坐标、半径、开始的弧度、结束的弧度
    //绘制方向：true（逆时针）、false（顺时针）
    //弧度 = 角度*Math.PI/180
    context.arc(100,100,50,0,45*Math.PI/180,false);
    context.stroke();
}

        4、图形的变换：

context.translate(x,y);    //平移
context.scale(x,y);    //放大
context.rotate(x,y);    //旋转

        5、绘制时钟：

context.beginPath();
context.closePath();
context.restore();    //重复到上一次保存
context.save();
context.clearRect();

        6、绘制图像：

context.drawImage(img,x,y);    //img：图片对象；x、y：坐标
context.drawImage(img,x,y,width,height);
context.drawImage(img,cut_x,cut_y,cut_width,cut_height,draw_x,draw_y,draw_width,draw_height);

五、canvas和svg（矢量）

Canvas和SVG都允许您在浏览器中创建图形，但是它们在根本上是不同的：

        SVG：

                SVG 是一种使用 XML 描述 2D 图形的语言。

                SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

                在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

        Canvas：

                Canvas 通过 JavaScript 来绘制 2D 图形。

                Canvas 是逐像素进行渲染的。

                在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

        Canvas：

                1、依赖分辨率

                2、不支持事件处理器

                3、弱的文本渲染能力

                4、能够以.png或.jpg格式保存结果图像

                5、最适合图像密集型的游戏，其中的许多对象会被频繁重绘

        SVG：

                1、不依赖分辨率

                2、支持事件处理器

                3、最适合带有大型渲染区域的应用程序（比如谷歌地图）

                4、复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

                5、不适合游戏应用