HTML5绘图API

最近接触到HTML5的一个非常酷的特性,就是可以在运动中动态绘制二维图形和位图图片,通过使用它自己的本地绘图API。这一特性不仅对web页面带来了很好的利用价值,而且对于移动设备的兼容性来说,价值更为凸显。

绘图API是HTML5中新增元素<canvas>中的一部分,它提供了2D绘图API。而且由于通过了HTML5的WebGL属性,3D绘图也有可能指日可待(WebGL是一项开源的3D绘图标准,可以为HTML 5 Canvas提供硬件的3D加速,这项技术目前在PC端浏览器上的应用相对较少)。

<canvas>元素是一个可以添加到HTML5页面中的矩形区域,借助2D绘图API可以控制这个区域中的每一个元素,为各种图形的绘制提供了可能。但是<canvas>元素本身不具备绘图的能力,它里面绘制的每个图形都是javascript语言编程实现。

<canvas>元素本身很简单,只具有三个属性:单位为像素的width和height,以及用于标识画布的id。< canvas >元素可以定义在HTML5页面中<body>内的任意位置,初始化时,<canvas>是一个空白的区域,但可以利用css给它设置边框或背景颜色等属性。

<canvas>创建好之后,首先就是要获得对它的引用,获取方式和文档对象模型(DOM)访问其他元素一样,如下:

var myCanvas = document.getElementById("canvasID");

然后,就可以访问<canvas>的绘图上下文,通过它 可以访问绘图API以及其方法。要获取上下文,<canvas>元素使用DOM方法getContext(),该方法只有一个参数,即上下文的类型。如下:

var context = myCanvas.getContext('2d')

有了画布及其context对象,就可以在HTML页面中使用绘图API及相关方法来创造伟大的艺术品了。哈哈哈哈哈~下面先来使用一下<canvas>来涂鸦试试呀。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>
<body>
    <img src="" alt="" id="sb">
    <canvas id="test" width="500px" height="500px" style="border: 1px solid red"></canvas>
     <script> 
     let test = document.getElementById('test');//获取js对象
     let context = test.getContext('2d');//画笔
            context.moveTo(100,100);//将画笔移动到某个位置
            context.lineTo(200,200);//将这支画笔移动到另一位置
            context.lineTo(170,300);
            context.lineTo(300,220);
            context.lineTo(270,400);
            context.strokeStyle='red';//这支笔的颜色
            context.lineWidth=5;//笔尖的粗细
            context.stroke();//调用函数实现
            context.closePath();//结束上一次绘制
            context.beginPath();//重新开始一次绘制
            context.arc(100,100,100,Math.PI*270,Math.PI*180);//画圆
            context.stroke();
            context.fillStyle='orange';//填充为orange色
            context.fill();//调用函数填充
            context.closePath();//结束上一次绘制
            context.beginPath();//重新开始一次绘制
            context.rect(360,360,45,60);//画矩形
            context.stroke();
            context.fillStyle='pink';//填充为pink色
            context.fill();//调用函数填充 
     </script>
</body>
</html> 
canvas涂鸦

已经了解了<canvas>基本绘图方法,现在做一个在线涂鸦画板吧。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>
<body>
    <img src="" alt="" id="sb">
    <canvas id="test" width="500px" height="500px" style="border: 1px solid red"></canvas>
    <input type="color" id="color" onchange="setcolor()">
    <button onclick="save()">保存</button>
    <script>
        function setcolor(){
            context.strokeStyle = color.value;
        }
        let test = document.getElementById('test');//获取js对象
        let context = test.getContext('2d');//画笔
        function save() {
                sb.src = (test.toDataURL('image/png'));
            }
        var canMove = false;
        test.onmousedown = (e) => {
            canMove = true;
            context.beginPath();
            context.moveTo(e.pageX,e.pageY);
        }

        test.onmousemove = (e) => {
            if( canMove ) {
                context.lineTo(e.pageX,e.pageY);
                context.stroke();
            }
        }

        window.onmouseup = () => {
            canMove = false;
            context.closePath();
        }
  </script>
</body>
</html> 
在线涂鸦画板

这样,一个简单的画板就成功了。

标签

发表评论