HTML5简明教程-1.1.HTML5画布Canvas

来源：互联网发布：nginx 日志等级编辑：程序博客网时间：2024/05/22 12:05

HTML5也不算新技术了，网上教程也很多，写下这篇文章更多是为了自我总结，也为想学习HTML5的朋友提供一些基础知识。

HTML5为我们提供了画布功能，用这个功能，我们可以简单的完成之前需要用flsh或大量js脚本完成的工作。

废话不多说，进入正题：

（1）定义canvas标签。HTML5提供了一个专门标签用于定义画布canvas，具体定义方式如下：

    <canvas id="can" width="500" height="500">        <span style="width:500px; height:100px;cloor:blue;">您的浏览器不支持canvas</span>    </canvas>

当浏览器不支持canvas标签时，会显示标签内部文字，当浏览器支持canvas时，标签内部文字将不显示。标签内部元素同样可以定义样式；

（2）获取绘制环境context。

            //获得页面元素            var canvas = document.getElementById('can');            //调用html5相关方法获得2D对象            var canvasContext = canvas.getContext("2d");

（3）绘制矩形。绘制一个矩形所需要的元素包括一个起点坐标，以及长宽值。属性fillStyle用于设置绘制颜色，函数fillRect()用于实际绘制矩形。

            //绘制矩形            //设置当前绘制颜色            canvasContext.fillStyle = "red";            //绘制图形，参数：（起点X轴坐标，起点Y轴坐标，X边长度，Y边长度）            canvasContext.fillRect(0, 0, 100, 100);            //用rgba设置颜色rgba（R色值，G色值，B色值，透明度）            canvasContext.fillStyle = "rgba(0,0,255,0.5)";            canvasContext.fillRect(50, 50, 100, 100);

（4）绘制直线。函数moveTo()用于设置绘制的起点，函数lineTo()函数实现直线从起点绘制到某个点，stroke()函数用于结束绘制

            //绘制直线，不可设置绘制颜色            //设置起点坐标，参数：（起点X轴坐标，起点Y轴坐标）            canvasContext.moveTo(0, 0);            //将线绘制到某坐标，参数：（X轴坐标，Y轴坐标）            canvasContext.lineTo(100, 100);            //将线继续绘制到下一个坐标，参数：（X轴坐标，Y轴坐标）            canvasContext.lineTo(100, 50);            //将线继续绘制到下一个坐标，参数：（X轴坐标，Y轴坐标）            canvasContext.lineTo(50, 50);            //设置新的起点坐标，本次设置不会影响上一次设置，参数：（起点X轴坐标，起点Y轴坐标）            canvasContext.moveTo(0, 0);            //将线绘制到某坐标，参数：（X轴坐标，Y轴坐标）            canvasContext.lineTo(50, 100);            //将线绘制到某坐标，参数：（X轴坐标，Y轴坐标）            canvasContext.lineTo(100, 100);            //绘制结束            canvasContext.stroke();

（5）绘制圆形。绘制圆形也需要设置绘制颜色fillStyle，用beginPath()函数开始绘制，用arc()函数绘制圆形（具体参数如下面注释代码，需要特别注意的绘制方向，与一般理解有些差异），用closePath()函数结束绘制，用fill()函数进行渲染。

            //绘制圆形            //设置绘制颜色            canvasContext.fillStyle = "green";            //开始新绘制，防止冲突重叠            canvasContext.beginPath();            //绘制圆形，参数（圆心的X坐标，圆心的Y坐标，半径值，绘制起始值，绘制终止值，绘制方向） 绘制方向：true或1表示逆时针，false或0表示顺时针            canvasContext.arc(100, 100, 50, Math.PI * 1, Math.PI * 2, true);            //结束绘制，防止冲突重叠            canvasContext.closePath();            //渲染结束            canvasContext.fill();

（6）绘制渐变色。获得渐变范围的函数createLinearGradient()的参数与创建矩形的参数有所不同，createLinearGradient()的四个参数都是坐标值,这一点需要注意一下。另外，用这个函数定义的颜色范围是基于整个canvas的，起点坐标之前的颜色是完全第一个addColorStop()的颜色，终点之后是最后一个addColorStop()的颜色，中间根据自定义颜色渐变。我们最终绘制的矩形仅仅是将渐变色的绘制矩形部分显示出来。

            //颜色渐变            //获得渐变范围，参数：（起点X轴坐标，起点Y轴坐标，终点X轴坐标，终点Y轴坐标）            var linerGrd = canvasContext.createLinearGradient(150, 150, 200, 200);            //设置起始颜色            linerGrd.addColorStop(0, "green");            //设置中间渐变颜色，理论上可设置无限多的中间颜色            linerGrd.addColorStop(0.5, "yellow");            //设置最终颜色            linerGrd.addColorStop(1, "red");            //将当前颜色渐变设置为绘制颜色            canvasContext.fillStyle = linerGrd;            //绘制矩形            canvasContext.fillRect(150, 150, 200, 200);

（7）载入图像。要在网页中加载图像是非常简单的，但是如果想对所载入的图像进行进一步处理，普通的img标签就处理不了了。HTML5为我们提供了加载图像的相关方法。有一点需要注意，定义完js的Image对象病添加src后若直接调用drawImage()方法进行图像绘制在有些浏览器（chrome等）里面是有问题的，可能由于图片加载时间的问题，图片会不显示，需要在图片加载完成后调用drawImage()将图片绘制到canvas上，也就是下面代码中的后三行。

            //绘制图像            //定义Image对象            var img = new Image();            //为image设置路径            img.src = "./resources/images/1.jpg";            //当图片加载完成后将其绘制到canvas中            img.onload = function() {                canvasContext.drawImage(img, 300, 300);            };

以上就是canvas的基本内容。

整体测试代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <canvas id="can" width="500" height="500">        <span style="width:500px; height:100px;cloor:blue;">您的浏览器不支持canvas</span>    </canvas></body><script type="text/javascript">    //获得页面元素    var canvas = document.getElementById('can');    //调用html5相关方法获得2D对象    var canvasContext = canvas.getContext("2d");    //绘制矩形    //设置当前绘制颜色    canvasContext.fillStyle = "red";    //绘制图形，参数：（起点X轴坐标，起点Y轴坐标，X边长度，Y边长度）    canvasContext.fillRect(0, 0, 100, 100);    //用rgba设置颜色rgba（R色值，G色值，B色值，透明度）    canvasContext.fillStyle = "rgba(0,0,255,0.5)";    canvasContext.fillRect(50, 50, 100, 100);    //绘制直线，不可设置绘制颜色    //设置起点坐标，参数：（起点X轴坐标，起点Y轴坐标）    canvasContext.moveTo(0, 0);    //将线绘制到某坐标，参数：（X轴坐标，Y轴坐标）    canvasContext.lineTo(100, 100);    //将线继续绘制到下一个坐标，参数：（X轴坐标，Y轴坐标）    canvasContext.lineTo(100, 50);    //将线继续绘制到下一个坐标，参数：（X轴坐标，Y轴坐标）    canvasContext.lineTo(50, 50);    //设置新的起点坐标，本次设置不会影响上一次设置，参数：（起点X轴坐标，起点Y轴坐标）    canvasContext.moveTo(0, 0);    //将线绘制到某坐标，参数：（X轴坐标，Y轴坐标）    canvasContext.lineTo(50, 100);    //将线绘制到某坐标，参数：（X轴坐标，Y轴坐标）    canvasContext.lineTo(100, 100);    //绘制结束    canvasContext.stroke();    //绘制圆形    //设置绘制颜色    canvasContext.fillStyle = "green";    //开始新绘制，防止冲突重叠    canvasContext.beginPath();    //绘制圆形，参数（圆心的X坐标，圆心的Y坐标，半径值，绘制起始值，绘制终止值，绘制方向） 绘制方向：true或1表示逆时针，false或0表示顺时针    canvasContext.arc(100, 100, 50, Math.PI * 1, Math.PI * 2, true);    //结束绘制，防止冲突重叠    canvasContext.closePath();    //渲染结束    canvasContext.fill();    //颜色渐变    //获得渐变范围，参数：（起点X轴坐标，起点Y轴坐标，终点X轴坐标，终点Y轴坐标）    var linerGrd = canvasContext.createLinearGradient(150, 150, 200, 200);    //设置起始颜色    linerGrd.addColorStop(0, "green");    //设置中间渐变颜色，理论上可设置无限多的中间颜色    linerGrd.addColorStop(0.5, "yellow");    //设置最终颜色    linerGrd.addColorStop(1, "red");    //将当前颜色渐变设置为绘制颜色    canvasContext.fillStyle = linerGrd;    //绘制矩形    canvasContext.fillRect(100, 100, 200, 200);    //绘制图像    //定义Image对象    var img = new Image();    //为image设置路径    img.src = "./resources/images/1.jpg";    //当图片加载完成后将其绘制到canvas中    img.onload = function() {        canvasContext.drawImage(img, 300, 300);    };</script></html>

本文连接：http://blog.csdn.net/tomorrow13210073213/article/details/42122307

转载请注明出处

0 0