canvas绘图通过属于 canvas 的 JavaScript 方法完成

针对不支持html5的IE浏览器

<!--[if IE]>

  <script type="text/javascript" src="excanvas.js"></script>

<![endif]-->

提示：canvas的绘图过程（即填充与描边）是非常消耗资源的，如果想节省系统资源提高效率，最好是绘制好所有路径，再一次性填充或描边图形。

canvas 方法

方法 用途
getContext(contextId) 公开在 canvas 上绘图需要的 API。惟一（当前）可用的 contextID 是 2d。
height 设置 canvas 的高度。默认值是 150 像素。
width 设置 canvas 的宽度。默认值是 300 像素。
createLinearGradient(x1,y1,x2,y2) 创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。
createRadialGradient(x1,y1,r1,x2,y2,r2) 创建一个放射状渐变。圆圈的起始坐标是 x1,y1，半径为 r1。圆圈的结束坐标为 x2,y2，半径为 r2。
addColorStop(offset, color) 向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。
fillStyle 设置用于填充一个区域的颜色 — 例如，fillStyle='rgb(255,0,0)'.
strokeStyle 设置用于绘制一根直线的颜色 — 例如，strokeStyle='rgb(255,0,0)'.
fillRect(x,y,w,h) 填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。
strokeRect(x,y,w,h) 绘制一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形的轮廓。
moveTo(x,y) 将绘图位置移动到坐标 x,y。
lineTo(x,y) 从绘图方法结束的最后位置到 x,y 绘制一条直线。

1、绘制矩形：用到fillRect

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>canvas绘制图形</title>

</head>

<body>

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

<script type="text/javascript">

  var canvas=document.getElementById("myCanvas");   //canvas 元素被设置为一个 JavaScript 变量

    var myContext=canvas.getContext("2d");  //将getContext 应用到 canvas 元素

    myContext.fillStyle="#ff0000";        //16进制设置填充颜色

    myContext.fillRect(30,30,300,300);         //定义大小

    myContext.fillStyle='rgb(0,255,0)';  //rgb设置填充颜色

    myContext.fillRect(60,60,300,300);

  myContext.fillStyle='rgba(255,0,0,0.5)';  //rgb+透明度设置填充颜色

  myContext.fillRect(90,90,300,300);

</script>

</body>

</html>

2、线性渐变，用到createLinearGradient

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>canvas绘制图形</title>

</head>

<body>

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

<script type="text/javascript">

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

    var myContext=myCanvas.getContext('2d');

    var myGradient=myContext.createLinearGradient(30,30,300,300);   //创建一个线性渐变

    myGradient.addColorStop(0,"#ff0000");       //位置0和1之间，颜色值

    myGradient.addColorStop(0.5,"#00FF00");

    myGradient.addColorStop(1,"#ff00ff");

    myContext.fillStyle=myGradient;             //用线性渐变填充

    myContext.fillRect(0,0,400,400);

</script>

</body>

</html>

3、放射性渐变，用到createRadialGradient

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>canvas绘制图形</title>

</head>

<body>

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

<script type="text/javascript">

var myCanvas=document.getElementById('myCanvas');

    var myContext=myCanvas.getContext('2d');

    var myGradient=myContext.createRadialGradient(300,300,0,300,300,400);  //6个参数

    myGradient.addColorStop("0","#ff0000");

    myGradient.addColorStop("1","#00ff00");

    myContext.fillStyle=myGradient;

    myContext.fillRect(0,0,300,300);

</script>

</body>

</html>

4、绘制矩形，与填充的不同，这个是描边效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>canvas绘制图形</title>

</head>

<body>

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

<script type="text/javascript">

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

    var myContext=myCanvas.getContext('2d');

myContext.strokeStyle="#ff0000";            //设置笔触纯色

    myContext.strokeRect(0,0,100,100);

</script>

</body>

</html>

(当宽度为1px时，很明显的出现了模糊的现象，解决方法是数值都加上0.5，具体原因就自己百度下吧)

5、渐变笔触

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>canvas绘制图形</title>

</head>

<body>

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

<script type="text/javascript">

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

    var myContext=myCanvas.getContext('2d');

    var myGradient=myContext.createLinearGradient(0,0,100,0);

    myGradient.addColorStop(0,"#ff0000");

    myGradient.addColorStop(1,'#0000ff');

    myContext.strokeStyle=myGradient;            //设置渐变笔触

    myContext.lineWidth=5;                         //描边宽度

    myContext.strokeRect(0,0,100,100);

</script>

</body>

</html>

6、绘制圆，圆周长公式=2∏r

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>canvas绘制图形</title>

</head>

<body>

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

<script type="text/javascript">

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

    var myContext=myCanvas.getContext('2d');

    myContext.beginPath();                      //开始一个新的绘制路径

    myContext.arc(100,75,50,0,2*Math.PI);     //以坐标点(100,75)为圆心，起始角为0，绘制一个半径为50px的圆形

    myContext.stroke();                         //按照指定的路径绘制弧线

</script>

</body>

</html>

7、绘制圆形

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>canvas绘制图形</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500"  style="margin:100px 0 0 100px;"></canvas>

<script type="text/javascript">

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

    var myContext=myCanvas.getContext('2d');

    myContext.arc(100,100,50,0,2*Math.PI);

    myContext.fillStyle="#ff0000";

    myContext.fill();

</script>

</body>

</html>

8、绘制直线

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>canvas绘制图形</title>

</head>

<body style="padding:500px;">

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

<script type="text/javascript">

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

    var myContext=myCanvas.getContext('2d');

    myContext.lineWidth=5;

    myContext.moveTo(0,0);      //从坐标(0,0)到(200,0)

    myContext.lineTo(200,0);

    myContext.stroke();         //绘制已定义的路径

</script>

</body>

</html>

9、绘制曲线

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>canvas绘制图形</title>

</head>

<body style="padding:500px;">

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

<script type="text/javascript">

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

    var myContext=myCanvas.getContext('2d');

    myContext.moveTo(20,20);

    myContext.quadraticCurveTo(20,100,200,20);

    myContext.stroke();

</script>

</body>

</html>

相关文章：

Canvas参考手册>>

HTML5：绘制图形的更多相关文章

  1. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  2. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  3. HTML5使用Canvas来绘制图形

    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...

  4. [Selenium] 操作 HTML5 中的 Canvas 绘制图形

    测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐 ...

  5. html5 canvas 笔记一（基本用法与绘制图形）

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...

  6. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  7. HTML5拓扑图形组件设计之道（一）

    HT for Web(http://www.hightopo.com/guide/readme.html)提供了涵盖通用组件.2D拓扑图形组件以及3D引擎的一站式解决方案,正如Hightopo官网所表 ...

  8. 矢量化的HTML5拓扑图形组件设计

    HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了: www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html ...

  9. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

随机推荐

  1. 在Ubuntu下安装IntelliJ IDEA

    1)在IDEA官网下载Linux版本安装包 2)将安装包shell到/usr/local目录下 3)切到安装目录下,验证文件校验和,官网上显示的校验和: 3d77ee82094dab51e345f16 ...

  2. Spring Session使用及源码解析

    参照: http://blog.csdn.net/wojiaolinaaa/article/details/62424642 总结点spring session的一些知识点: spring通过过滤器, ...

  3. 51nod 拉勾专业算法能力测评消灭兔子 优先队列+贪心

    题目传送门 这道题一开始想了很久...还想着写网络流 发现根本不可能.... 然后就想着线段树维护然后二分什么的 最后发现优先队列就可以了 代码还是很简洁的啦 233 就是把兔子按血量从大到小排序一下 ...

  4. SQLSERVER数据库置疑、可疑、脱机、单用户、紧急模式等的修复

    数据库出现置疑.可疑.脱机.单用户.紧急模式主要是因为数据库的日志文件除了问题,2000和2008修复方式不一样,2008的修复脚本在2000中不适用,主要是不被2000识别. 假设数据库名为:eis ...

  5. bzoj 1996 DP

    我们可以发现,对于最后队列的一段区间[i,j],不论这一段区间如何插入,除了最后一个插入的对象外,剩下的对后续插入没有影响,这启发我们可以用DP来解决这一问题. w[i][j][0..1]代表区间[i ...

  6. word2vec 理论与实践

    导读 本文简单的介绍了Google 于 2013 年开源推出的一个用于获取 word vector 的工具包(word2vec),并且简单的介绍了其中的两个训练模型(Skip-gram,CBOW),以 ...

  7. UVALIVE 3486 Cells

    通过入栈出栈顺序判断祖先关系 这里UVALIVE还 #include <map> #include <set> #include <list> #include & ...

  8. 转 appium解决每次运行都需要安装Unlock以及AppiumSetting的问题

    一.需要解决的问题 在部分android机型上每次运行最新版的appium-desktop都需要安装AppiumSetting以及Unlock,并且安装过程需要用户手动来确认,即使测试机上已经安装了这 ...

  9. GIt 和 Github

    原创 by zoe.zhang        GitHub中采用的比较多得是markdown的语法,博客园里对markdown的支持感觉不是特别友好,但是为了应景,还是用了markdown来写这一篇文 ...

  10. [ Mariadb ] 记录一次MySQL数据库时区的问题

    操作系统:Centos 7数据库:5.5.52-MariaDB 根本问题:由于系统时区不对,造成数据库的时区和数据的时间不正确. 处理办法: # 查看系统时区, [root@mongodb ~]# t ...