HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。

canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。、

浏览器支持情况如下：

1.1、创建canvas元素

<canvas >不支持Canvas</canvas>

以上代码创建了一个宽度为800像素，高度为600像素的canvas。不建议使用CSS样式指定宽度和高度。
canvas标签中间的内容为替代显示内容，当浏览器不支持canvas标签时会显示出来。

创建了canvas元素后，要在canvas元素上面绘制图象，首先必须获取canvas环境上下文：
canvas.getContext(画布上绘制的类型)
2d：表示2维
experimental-webgl：表示试验版3维
webgl：表示3维

Hello Wolrd示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas绘图1</title>
    </head>
    <body>
        <canvas id="canvas1" width="800" height="600"></canvas>
        <script type="text/javascript">
           //获得画布元素
            var canvas1=document.getElementById("canvas1");
            //获得2维绘图的上下文
            var ctx=canvas1.getContext("2d");
            
            //设置线宽
            ctx.lineWidth=10;
            //设置线的颜色
            ctx.strokeStyle="blue";
            
            //将画笔移动到00点
            ctx.moveTo(0,0);
            //画线到800，600的坐标
            ctx.lineTo(800,600);
            
            //执行画线
            ctx.stroke();
        </script>
    </body>
</html>

运行效果：

HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

在页面上就显示了一条直线，另存为后就是一张背景透明的png图片。

练习：画一个100X100的正方形在画布正中央

1.2、画线

context.moveTo(x,y)

把画笔移动到x,y坐标，建立新的子路径。

context.lineTo(x,y)
建立上一个点到x,y坐标的直线，如果没有上一个点，则等同于moveTo(x,y)，把（x,y）添加到子路径中。

context.stroke()
描绘子路径

            //设置线宽
            ctx.lineWidth = 10;
            //设置线的颜色
            ctx.strokeStyle = "blue";
            //将画笔移到x0,y0处
            context.moveTo(x0, y0);
            //从x0,y0到x1,y1画一条线
            ontext.lineTo(x1, y1);
            //从x1,y1到x2,y2画条线
            ontext.lineTo(x2, y2);
            //执行填充
            ontext.fill();
            //执行画线
            context.stroke();

HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

结合javascript事件实现鼠标自由划线：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>canvas绘图2</title>
    </head>

    <body>
        <canvas id="canvas1" width="800" height="600"></canvas>
        <script type="text/javascript">
            //获得画布元素
            var canvas1 = document.getElementById("canvas1");
            //获得2维绘图的上下文
            var ctx = canvas1.getContext("2d");

            //设置线宽
            ctx.lineWidth = 10;
            //设置线的颜色
            ctx.strokeStyle = "blue";
            
            canvas1.onmousemove=function(e){
                //划线到当前客户端的x与y座标
                ctx.lineTo(e.clientX, e.clientY);
                //执行画线
                ctx.stroke();
            }
        </script>
    </body>

</html>

运行效果：

HTML5 学习笔记（四）——canvas绘图、WebGL、SVG

移动手机端：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script>
            var canvas1;
            var ctx;
            var width;
            var height;
            var msg;
            window.onload = function() {
                canvas1 = document.getElementById("canvas1");
                msg = document.getElementById("msg");
                ctx = canvas1.getContext("2d");
                width = canvas1.width;
                height = canvas1.height;
                ctx.fillRect(0, 0, width, height);
                ctx.moveTo(0, 0);
                ctx.lineTo(100, 100);
                ctx.strokeStyle = "red";
                ctx.lineWidth = 2;
                ctx.stroke();
                canvas1.onmousemove = function(e) {
                    ctx.lineTo(e.clientX, e.clientY);
                    ctx.stroke();
                }
                canvas1.ontouchmove = function(e) {
                    e.preventDefault();
                    var touchE=e.targetTouches[0]
                    msg.innerHTML += touchE.clientX+"，"+touchE.clientY+ "<br/>";
                    ctx.lineTo(touchE.clientX, touchE.clientY);
                    ctx.stroke();
                }
                canvas1.ontouchstart = function() {
                    msg.innerHTML += "ontouchstart" + "<br/>";
                }
                canvas1.ontouchend = function() {
                    msg.innerHTML += "ontouchend" + "<br/>";
                }
            }
        </script>
    </head>

    <body>
        <canvas id="canvas1" width="500" height="500">不支持</canvas>
        <div id="msg"></div>
    </body>

</html>

View Code