绘制直线时，一般会用到moveTo与lineTo两种方法。

案例1：

  1. <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script>
            function draw(){
                var c=document.getElementById("myCanvas");
                var cxt= c.getContext("2d");
                cxt.moveTo(10,10);
                cxt.lineTo(250,100);
                cxt.lineTo(10,100);
                cxt.stroke();
            }
        </script>
    </head>
    <body onload="draw()">
    <canvas id="myCanvas" width="300" height="160" style="border: 1px solid #dddddd">您的浏览器不支持</canvas>
  2.  
  3. </body>
    </html>
    效果图：

注释：

（1）moveTo( x , y );

该方法的作用是将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点；

（2）lineTo( x , y );

该方法在moveTo方法中指定的直线起点与此参数中指定的直线终点之间绘制一条直线；

绘制线性渐变

案例1：

  1. <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script>
            function draw(){
                var c=document.getElementById("myCanvas");
                var cxt= c.getContext("2d");
                var grd=cxt.createLinearGradient(0,0,175,50);
                grd.addColorStop(0,"#ff0000");
                grd.addColorStop(1,"#00ff00");
                cxt.fillStyle=grd;
                cxt.fillRect(0,0,175,50);
            }
        </script>
    </head>
    <body onload="draw()">
    <canvas id="myCanvas" width="300" height="100" style="border: 1px solid #dddddd">您的浏览器不支持</canvas>
  2.  
  3. </body>
    </html>
  4.  
  5. 效果图：

注释：

（1）cxt.createLinearGradient( xStart , yStart , xEnd , yEnd );

xStart为渐变起始地点的横坐标，yStart为渐变起始地点的纵坐标；xEnd为渐变结束地点的横坐标；yEnd为渐变结束地点的纵坐标。

（2）cxt.addColorStop( offset , color );

该方法可以追加渐变的颜色，因为是渐变，所以至少需要使用两次addColorStop方法以追加两个颜色（开始颜色与结束颜色），可以追加多个颜色，例如“从蓝色渐变到白色，然后渐变到绿色”。蓝色起始点坐标到白色终点坐标之间的距离与白色起始点到绿色终点坐标之间的距离相等，这时蓝色的位移量为0，白色的位移量为0.5，绿色的位移量为1。

offset为所设定的颜色离开渐变起始点的偏移量，参数值是一个范围在0到1之间的浮点值，渐变起始点的偏移量为0，渐变结束点的偏移量为1；color为绘制时使用的颜色；

绘制径向渐变

案例1：

  1. <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script>
            function draw(){
                var c=document.getElementById("myCanvas");
                var cxt= c.getContext("2d");
                var grd=cxt.createRadialGradient(150,150,0,150,150,100);
                grd.addColorStop(0.1,"#ff0000");
                grd.addColorStop(1,"#00ff00");
                cxt.fillStyle=grd;
                cxt.fillRect(0,0,400,300);
            }
        </script>
    </head>
    <body onload="draw()">
    <canvas id="myCanvas" width="320" height="320" style="border: 1px solid #dddddd">您的浏览器不支持</canvas>
  2.  
  3. </body>
    </html>
  4.  
  5. 效果图：
  6.  
  7. 注释：
    （1）cxt.createRadialGradient( xStart , yStart , radiusStart , xEnd , yEnd , radiusEnd );
             该方法使用六个参数，xStart为渐变开始圆的圆心横坐标；yStart为渐变开始圆的圆心纵坐标，radiusStart为开始圆的半径，xEnd为渐变结束圆的圆心横坐标，yEnd为渐变结束圆的圆心纵坐标，radiusEnd为结束圆的半径。
             在这个方法中，分别指定了两个圆的大小与位置。从第一个圆的圆心处向外进行扩散渐变，一直扩散到第二个圆的外轮廓处。
    （2）在设定颜色时，与线性渐变相同，使用addColorStop方法进行设定即可。同样也需要设定0-1之间的浮点数来作为渐变转折点的偏移量。

HTML5画布（线条、渐变）的更多相关文章

  1. HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient

    今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂. 不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊. 比如从红色变成黄色,在红与黄之间的那个地方 ...

  2. 关于HTML5画布canvas的功能

    一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...

  3. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  4. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  5. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  6. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  7. HTML5 画布参考

    描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...

  8. html5画布基础

    canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...

  9. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

随机推荐

  1. (翻译玩)在使用flask-script的应用上使用gunicorn

    在使用flask-script的应用上使用gunicorn 两周前,我强烈的想要学习一点新知识,像新的语言,新的框架之类的!好让我的大脑忙碌起来,寻找了一些日子后,我决定学习现在越来越流行的云应用平台 ...

  2. docker中运行ASP.NET Core Web API

    在docker中运行ASP.NET Core Web API应用程序 本文是一篇指导快速演练的文章,将介绍在docker中运行一个ASP.NET Core Web API应用程序的基本步骤,在介绍的过 ...

  3. Content-Disposition的使用方法

    一.作用: 1)希望某类或者某已知MIME类型的文件(比如:*.gif;*txt;*.htm)能够在访问时弹出"文件下载对话框" 2)希望客户端下载时以指定文件名显示 3)希望某文 ...

  4. Unity中的关节

    关节组件一共分为5大类,它们分别是链条关节.固定关节.弹簧关节.角色关节和可配置关节.链条关节(Hinge Joint):将两个物体以链条的形式绑在一起,当力量过大超过链条的固定力矩时,两个物体就会产 ...

  5. Unity3D中C#编写脚本

    1.继承MonoBehaviour类:任何一个游戏脚本都需要去继承MonoBehaviour这个类,只是在创建javascript脚本的时候,系统会将其类名与继承关系隐藏起来. 2.声明变量:使用Ja ...

  6. 磁珠(FB)的原理

    磁珠的主要原料为铁氧体.铁氧体是一种立方晶格结构的亚铁磁性材料.铁氧体材料为铁镁合金或铁镍合金,它的制造工艺和机械性能与陶瓷相似,颜色为灰黑色.电磁干扰滤波器中经常使用的一类磁芯就是铁氧体材料,许多厂 ...

  7. Powershell创建数组

    在Powershell中创建数组可以使用逗号. PS C:Powershell> $nums=2,0,1,2 PS C:Powershell> $nums 2 0 1 2 对于连续的数字数 ...

  8. NOI2015 小园丁与老司机

    http://uoj.ac/problem/132 这道题前2行的输出比较容易,就是简单的动态规划,然后第3行就是比较少见的有上下界的最小流. 前2行比较容易,我们讨论一下第3行的解法吧. 比如第1个 ...

  9. php+jquery+ajax+json的一个最简单实例

    html页面: <html> <head> <meta http-equiv="content-type" content="text/ht ...

  10. 利用Connect By构造数列

    ,) yymm ;