下载文档原格式
使⽤HTML5Canvas绘制直线或折线等线条的⽅法讲解HTML5 Canvas基本概念讲解html5，这个应该就不需要多作介绍了，只要是开发⼈员应该都不会陌⽣。
html5是「新兴」的⽹页技术标准，⽬前，除IE8及其以下版本的IE浏览器之外，⼏乎所有主流浏览器(FireFox、Chrome、Opera、Safari、IE9+)都已经开始⽀持html5了。
除此之外，在移动浏览器市场上，众多的移动浏览器也纷纷展开关于「html5的⽀持能⼒以及性能表现」的军备竞赛。
html作为⾰命性的⽹页技术标准，再加上众多浏览器⼚商或组织的⿍⼒⽀持，可以想见，html5将会成为未来⽹页技术的领头⽺。
html5，说其是「新兴」的，其实也不算新了。
毕竟，html5早在2008年其第⼀份正式草案就已经对外公布。
从2008年算起，到现在也算是有些年头了。
不过，到⽬前为⽌，对于⼤多数开发⼈员⽽⾔，仍然是「雷声⼤，⾬点⼩」——听说html5的多，实际使⽤html5的却很少。
众所周知，html5中增加了许多新特性。
在html5的众多特性中，Canvas应该算是最引⼈注⽬的新特性之⼀。
我们使⽤html5的Canvas对象可以直接在浏览器的⽹页上绘制图形。
这意味着浏览器可以脱离Flash等第三⽅插件，直接在⽹页上显⽰图形或动画。
现在，我们就来为html5初学者介绍如何使⽤html5 Canvas绘制基本的图形。
⾸先，我们需要准备如下html基础代码：XML/HTML Code复制内容到剪贴板1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="UTF-8">5. <title>HTML5 Canvas⼊门⽰例</title>6. </head>7. <body>8.9. </body>10. </html>上述代码是⼀个html5页⾯的基本代码模板。
HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、⾃定义图像）⼀、对 canvas 的理解 <canvas>标签是 HTML5 中的新标签，像所有的 dom 对象⼀样它有⾃⼰本⾝的属性、⽅法和事件。
canvas 是⽤来在⽹页上绘制图形的（我们通常称之为画布），canvas 只是图形容器，需要使⽤ js 脚本来绘制图形，可以绘制线条、矩形、多边形、圆形、圆环、组合图形、⽂字、⾃定义图像等。
浏览器⽀持注释：Internet Explorer 8 以及更早的版本不⽀持 <canvas> 标签。
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari ⽀持 <canvas>标签。
⼆、基本⽅法绘图环境： 语法 Canvas.getContext(contextID) 参数contextID指定了您想要在画布上绘制的类型。
当前唯⼀的合法值是 "2d"，它指定了⼆维绘图，并且导致这个⽅法返回⼀个环境对象，该对象导出⼀个⼆维绘图API。
【注】：getContext() ⽅法返回⼀个⽤于在画布上绘图的环境。
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的⽅法。
绘制图形样式style（⼀般在绘制图形前先进⾏样式设定）：context.fillStyle //填充样式context.strokeStyle //笔触颜⾊context.lineWidth //边框宽度绘制图像有两种⽅法：context.fill() //填充context.stroke() //绘制边框颜⾊的表⽰⽅式:颜⾊名称:"red" "green" "blue"⼗六进制颜⾊值: "#FFFFFF"三⾊值：rgb(1-255,1-255,1-255)四⾊值：rgba(1-255,1-255,1-255,透明度)三、使⽤ <canvas> Step1: ⾸先在html页⾯中添加<canvas>标签，规定好画布的id和尺⼨，代码如下：<!--规定了canvas元素的id名称为canvas、宽度为400px、⾼度为300px--><canvas id="myCanvas" width="400" height="300"/> Step2: 通过JavaScript来进⾏绘制： ⽅法⼀：<!--⽤⾕歌浏览器，获取canvas对象时需要先加载对象，所以要把该段代码放到body中，在js⽂件⾥进⾏绘制图像--><script src="canvas.js"></script> ⽅法⼆：<!--或者直接在body⾥编写代码--><script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "#FF0000"; context.fillRect(50,50,150,100);</script> 图解： Step3: Step2 分步骤： 通过id来捕获canvas元素 创建 context 对象 指定 fillStyle 填充颜⾊为红⾊指定 fillRect ：fillRect(起始点x轴坐标, 始点y轴坐标, 宽度, ⾼度);四、实例1--绘制线条： context.moveTo(x,y) context.lineTo(x,y)x:x坐标y:y坐标起点 moveTo 的点到终点 lineTo 的点之间画⼀条直线如果没有moveTo那么第⼀次lineTo的效果和moveTo⼀样每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前⼀次lineTo的结束点1 1 // 绘制对⾓线2 2 function demo1(id){3 3 var canvas = document.getElementById(id);4 4 var context = canvas.getContext("2d");5 5 6 6 context.strokeStyle = "#ff0000";7 78 8 context.moveTo(0,0);9 9 context.lineTo(200,100);10 10 context.stroke();11 11 }View Code实例结果：1// 绘制直⾓三⾓形2function demo1(id){3var canvas = document.getElementById(id);4 var context = canvas.getContext("2d");5 6 context.strokeStyle = "#ff0000";78 context.lineTo(20, 20);9 context.lineTo(20, 70);10 context.lineTo(70, 70);11 context.lineTo(20, 20);12 context.stroke();13 }View Code【注】：1. 三⾓形有三个点，但在连线的时候还需要连回顶点；2. 最后⼀定记得加上 stroke(); 初学时容易犯这个⽑病，这相当于你把点定好了，却没⽤线连起来，岂不......实例结果：CSS属性中有⼀圆⾓设置 radius，canvas画线段也要达到这种圆⾓匾额效果，我么也有相应的办法： lineJoin 属性,可以设置线的交汇处的样式，lineJoin有3个属性值：miter(尖⾓，默认)，bevel（斜⾓）,round（圆⾓） lineCap 属性，定义线条的端点。
html5canvas绘图-多边形的绘制现在，我们已经将CANVAS绘图环境对象所⽀持的全部基本图形都讲完了。
它们包括：线段、矩形、圆弧、圆形以及贝塞尔曲线。
但是，我们肯定需要在canvas之中绘制除此之外的其他图形，⽐⽅说，三⾓形、六边形和⼋边形。
在本节中，你将会学到如下图所⽰的应⽤程序，对任意对变形进⾏描边及填充。
使⽤moveTo()与lineTo（）⽅法，再结合⼀些简单的三⾓函数，就可以绘制出任意边数的多边形。
html代码：1<html>2<head>3<title>Drawing Polygons</title>45<style>6 body {7 background: #eeeeee;8 }910 #controls {11 position: absolute;12 left: 25px;13 top: 25px;14 }1516 #canvas {17 background: #ffffff;18 cursor: pointer;19 margin-left: 10px;20 margin-top: 10px;21 -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);22 -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);23 box-shadow: 4px 4px 8px rgba(0,0,0,0.5);24 }25</style>26</head>2728<body>29<canvas id='canvas' width='850' height='600'>30 Canvas not supported31</canvas>3233<div id='controls'>34 Stroke color: <select id='strokeStyleSelect'>35<option value='red'>red</option>36<option value='green'>green</option>37<option value='blue'>blue</option>38<option value='orange'>orange</option>39<option value='cornflowerblue' selected>cornflowerblue</option>40<option value='goldenrod'>goldenrod</option>41<option value='navy'>navy</option>42<option value='purple'>purple</option>43</select>4445 Fill color: <select id='fillStyleSelect'>46<option value='rgba(255,0,0,0.5)'>semi-transparent red</option>47<option value='green'>green</option>48<option value='rgba(0,0,255,0.5)'>semi-transparent blue</option>49<option value='orange'>orange</option>50<option value='rgba(100,140,230,0.5)'>semi-transparent cornflowerblue</option>51<option value='goldenrod' selected>goldenrod</option>52<option value='navy'>navy</option>53<option value='purple'>purple</option>54</select>5556 Sides: <select id='sidesSelect'>57<option value=4 select>4</option>58<option value=6>6</option>59<option value=8>8</option>60<option value=10>10</option>61<option value=12>12</option>62<option value=20>20</option>63</select>6465 Start angle: <select id='startAngleSelect'>66<option value=0 select>0</option>67<option value=22.5>22.5</option>68<option value=45>45</option>69<option value=67.5>67.5</option>70<option value=90>90</option>71</select>7273 Fill <input id='fillCheckbox' type='checkbox' checked/>74<input id='eraseAllButton' type='button' value='Erase all'/>75</div>7677<script src = 'example.js'></script>78</body>79</html>example.js代码：1var canvas = document.getElementById('canvas'),2 context = canvas.getContext('2d'),3 eraseAllButton = document.getElementById('eraseAllButton'),4 strokeStyleSelect = document.getElementById('strokeStyleSelect'),5 startAngleSelect = document.getElementById('startAngleSelect'), 67 fillStyleSelect = document.getElementById('fillStyleSelect'),8 fillCheckbox = document.getElementById('fillCheckbox'),910 sidesSelect = document.getElementById('sidesSelect'),1112 drawingSurfaceImageData,1314 mousedown = {},15 rubberbandRect = {},16 dragging = false,1718 sides = 8,19 startAngle = 0,2021 guidewires = true,2223 Point = function (x, y) {24this.x = x;25this.y = y;26 };272829// Functions.....................................................3031function drawGrid(color, stepx, stepy) {32 context.save()3334 context.strokeStyle = color;35 context.fillStyle = '#ffffff';36 context.lineWidth = 0.5;37 context.fillRect(0, 0, context.canvas.width, context.canvas.height); 3839for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {40 context.beginPath();41 context.moveTo(i, 0);42 context.lineTo(i, context.canvas.height);43 context.stroke();44 }4546for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {47 context.beginPath();48 context.moveTo(0, i);49 context.lineTo(context.canvas.width, i);50 context.stroke();51 }5253 context.restore();54 }5556function windowToCanvas(e) {57var x = e.x || e.clientX,58 y = e.y || e.clientY,59 bbox = canvas.getBoundingClientRect();6061return { x: x - bbox.left * (canvas.width / bbox.width),62 y: y - bbox.top * (canvas.height / bbox.height)63 };64 }6566// Save and restore drawing surface..............................6768function saveDrawingSurface() {69 drawingSurfaceImageData = context.getImageData(0, 0,70 canvas.width,71 canvas.height);72 }7374function restoreDrawingSurface() {75 context.putImageData(drawingSurfaceImageData, 0, 0);76 }7778// Rubberbands...................................................7980function updateRubberbandRectangle(loc) {81 rubberbandRect.width = Math.abs(loc.x - mousedown.x);82 rubberbandRect.height = Math.abs(loc.y - mousedown.y);8384if (loc.x > mousedown.x) rubberbandRect.left = mousedown.x;85else rubberbandRect.left = loc.x;8687if (loc.y > mousedown.y) rubberbandRect.top = mousedown.y;88else rubberbandRect.top = loc.y;89 }9091function getPolygonPoints(centerX, centerY, radius, sides, startAngle) {92var points = [],93 angle = startAngle || 0;9495for (var i=0; i < sides; ++i) {96 points.push(new Point(centerX + radius * Math.sin(angle),97 centerY - radius * Math.cos(angle)));98 angle += 2*Math.PI/sides;99 }100101return points;102 }103104function createPolygonPath(centerX, centerY, radius, sides, startAngle) { 105var points = getPolygonPoints(centerX, centerY, radius, sides, startAngle); 106107 context.beginPath();108109 context.moveTo(points[0].x, points[0].y);110111for (var i=1; i < sides; ++i) {112 context.lineTo(points[i].x, points[i].y);113 }114115 context.closePath();116 }117118function drawRubberbandShape(loc, sides, startAngle) {119 createPolygonPath(mousedown.x, mousedown.y,120 rubberbandRect.width,121 parseInt(sidesSelect.value),122 (Math.PI / 180) * parseInt(startAngleSelect.value));123 context.stroke();124125if (fillCheckbox.checked) {126 context.fill();127 }128 }129130function updateRubberband(loc, sides, startAngle) {131 updateRubberbandRectangle(loc);132 drawRubberbandShape(loc, sides, startAngle);133 }134135// Guidewires....................................................136137function drawHorizontalLine (y) {138 context.beginPath();139 context.moveTo(0,y+0.5);140 context.lineTo(context.canvas.width,y+0.5);141 context.stroke();142 }143144function drawVerticalLine (x) {145 context.beginPath();146 context.moveTo(x+0.5,0);147 context.lineTo(x+0.5,context.canvas.height);148 context.stroke();149 }150151function drawGuidewires(x, y) {152 context.save();153 context.strokeStyle = 'rgba(0,0,230,0.4)';154 context.lineWidth = 0.5;155 drawVerticalLine(x);156 drawHorizontalLine(y);157 context.restore();158 }159160// Event handlers................................................161162 canvas.onmousedown = function (e) {163var loc = windowToCanvas(e);164165 saveDrawingSurface();166167 e.preventDefault(); // prevent cursor change168169 saveDrawingSurface();170 mousedown.x = loc.x;171 mousedown.y = loc.y;172 dragging = true;173 };174175 canvas.onmousemove = function (e) {176var loc;177178if (dragging) {179 e.preventDefault(); // prevent selections180181 loc = windowToCanvas(e);182 restoreDrawingSurface();183 updateRubberband(loc, sides, startAngle);184185if (guidewires) {186 drawGuidewires(mousedown.x, mousedown.y);187 }188 }189 };190191 canvas.onmouseup = function (e) {192var loc = windowToCanvas(e);193 dragging = false;194 restoreDrawingSurface();195 updateRubberband(loc);196 };197198 eraseAllButton.onclick = function (e) {199 context.clearRect(0, 0, canvas.width, canvas.height);200 drawGrid('lightgray', 10, 10);201 saveDrawingSurface();202 };203204 strokeStyleSelect.onchange = function (e) {205 context.strokeStyle = strokeStyleSelect.value;206 };207208 fillStyleSelect.onchange = function (e) {209 context.fillStyle = fillStyleSelect.value;210 };211212// Initialization................................................213214 context.strokeStyle = strokeStyleSelect.value;215 context.fillStyle = fillStyleSelect.value;216 drawGrid('lightgray', 10, 10);上述程序清单中的代码⾸先获取了指向canvas绘图环境对象的引⽤，并且定义了⼀个名为point的对象。
如何使用JavaScript实现Canvas绘图和动画使用JavaScript来实现Canvas绘图和动画是一种常见的技术，它可以实现各种各样的图形效果和动态交互，非常适合用于创建各种类型的网页动画和游戏。
在本文中，我将详细介绍如何使用JavaScript来绘制图形、实现动画以及一些常用的绘图和动画效果。
一、构建Canvas元素为了开始绘制和动画，我们首先需要在HTML文档中创建一个Canvas元素。
Canvas是HTML5中新增的元素，它提供了一个绘制2D 图形的区域，我们可以通过JavaScript来操纵它。
在HTML文档的body标签中添加以下代码：```<canvas id="myCanvas" width="500" height="300"></canvas> ```上面的代码创建了一个id为myCanvas的Canvas元素，宽度为500像素，高度为300像素。
二、获取Canvas上下文要绘制图形或进行动画，我们需要获取Canvas的上下文对象。
在JavaScript中，我们可以使用`getContext()`方法来获取上下文对象。
在JavaScript中，使用以下代码获取Canvas上下文对象：```const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');```上面的代码通过`getElementById`方法获取了id为myCanvas的Canvas元素，然后通过`getContext`方法获取了2D上下文对象ctx。
三、绘制基本图形下面介绍如何使用JavaScript在Canvas上绘制一些基本图形，例如矩形、圆形和直线。
Canvas提供了一系列的API可以用于绘制图形。
HTML5 canvas 初级入门教程HTML5 canvas 即 HTML5 画布，是一个现代浏览器都支持的 HTML5 非插件绘图的功能，本 文将展示如何通过 HTML5 canvas API 操作 canvas 元素、绘制图形、改变绘图颜色以及删 除图形，让我们开始进入这很酷的新技术的短暂旅行吧。
canvas 元素简介使用 canvas 元素相当简单，它只是一个单纯的 HTML 标签，外加宽高两个特性。
<canvas width="500" height="500"> <!-- 在这里插入向后兼容的内容，不支持 canvas 的浏览器可以解析和显示 --> </canvas>上面的代码在页面中插入了一个透明的画布，canvas 元素内部的内容可以在不支持 canvas 功能的浏览器下显示你想给你的用户提供的信息，联想下<noscript>元素就可以。
浏览器支持很重要的一点就是浏览器对 canvas 的支持还是相当不错的，所有现代浏览器都支持它，包 括最新版的 IE9：Internet Explorer 9.0+ Safari 3.0+ Firefox 3.0+ Chrome 3.0+ Opera 10.0+ iOS 1.0+ Android 1.0+有趣的是，你可以在 IE8 以及更低版本的 IE 浏览器下使用 canvas 功能，借助 ExplorerCanvas 插件。
画布尺寸当定义 canvas 元素的尺寸时，最好通过 HTML 设置它的 width 和 height 特性，因为通过 CSS 设置宽高会导致画布按比例缩放到你设置的值，这背后有它的逻辑原因：在 canvas 元 素的内部存在一个名为 2d 渲染环境（2d redering context）的对象，所以，通过 CSS 设置 画布尺寸会引起奇怪的效果。
一、前言HTML5和CSS是Web开发中常用的两种技术，在网页设计中，渐变色的运用可以为网页增添美感，提升用户体验。
本文将通过介绍HTML5和CSS渐变色的使用方法，并给出具体的案例演示，帮助读者更好地了解如何在网页设计中运用渐变色。
二、 HTML5渐变色的使用方法1. 使用<canvas>标签HTML5中可以通过<canvas>标签来绘制渐变色。
使用Canvas标签的渐变色主要包括线性渐变和径向渐变两种。
2. 线性渐变线性渐变是沿着一条直线方向进行颜色的渐变，具体实现代码如下：```<canvas id="linear-gradient" width="200"height="200"></canvas><script>var canvas = document.getElementById('linear-gradient');var ctx = canvas.getContext('2d');// 创建线性渐变var linearGradient = ctx.createLinearGradient(0, 0, 200, 0);linearGradient.addColorStop(0, 'red');linearGradient.addColorStop(1, 'blue');// 填充颜色ctx.fillStyle = linearGradient;ctx.fillRect(0, 0, 200, 200);</script>```3. 径向渐变径向渐变是以某一点为中心，向外辐射渐变颜色，具体实现代码如下：```<canvas id="radial-gradient" width="200"height="200"></canvas><script>var canvas = document.getElementById('radial-gradient');var ctx = canvas.getContext('2d');// 创建径向渐变var radialGradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 100);radialGradient.addColorStop(0, 'red');radialGradient.addColorStop(1, 'blue');// 填充颜色ctx.fillStyle = radialGradient;ctx.fillRect(0, 0, 200, 200);</script>```三、 CSS渐变色的使用方法1. 线性渐变在CSS中，可以通过linear-gradient属性来实现线性渐变，具体实现代码如下：```.linear-gradient {width: 200px;height: 200px;background: linear-gradient(to right, red, blue);}```2. 径向渐变在CSS中，可以通过radial-gradient属性来实现径向渐变，具体实现代码如下：```.radial-gradient {width: 200px;height: 200px;background: radial-gradient(circle at 50 50, red, blue);}```四、 HTML5+CSS渐变色案例下面通过一个具体的案例演示HTML5和CSS渐变色的运用。
canvas函数Canvas函数——JavaScript中的绘图利器一、概述Canvas是HTML5中新增的元素，它提供了一种在客户端中绘制图形的方法。
通过JavaScript中的Canvas函数，可以实现在网页中动态展示各种图形和动画效果，使网页更加生动有趣。
二、Canvas函数的基本用法使用Canvas函数，首先需要在HTML中创建Canvas元素。
之后，可以通过JavaScript获取该元素，并利用该元素的上下文（context）对象绘制各种图形。
1.获取Canvas元素利用document对象的getElementById方法，即可获取网页中的Canvas元素。
代码如下：var canvas = document.getElementById("myCanvas");2.获取上下文对象通过Canvas元素的getContext方法，可以获取到上下文对象。
该方法需要传入一个参数，表示上下文的类型，通常使用2d表示2D上下文。
代码如下：var ctx = canvas.getContext("2d");3.绘制图形获取上下文对象之后，就可以使用各种Canvas函数进行绘制了。
以下是几个基本的绘制函数及其用法：（1）绘制矩形Canvas函数中的rect函数可以绘制一个矩形。
该函数需要传入四个参数：矩形左上角的横坐标、矩形左上角的纵坐标、矩形的宽度和高度。
代码如下：ctx.rect(x, y, width, height);ctx.stroke(); //绘制边框（2）填充矩形Canvas函数中的fillRect函数可以绘制一个填充的矩形。
该函数需要传入四个参数：矩形左上角的横坐标、矩形左上角的纵坐标、矩形的宽度和高度。
代码如下：ctx.fillRect(x, y, width, height);（3）绘制圆形Canvas函数中的arc函数可以绘制一个圆形或弧形。
canvas的用法Canvas是HTML5中的一个重要特性，它是一个可以用来绘制图形的HTML元素。
Canvas提供了一种在网页上绘制图形的方法，可以用来制作动画、游戏、数据可视化等。
本文将介绍Canvas的用法，包括如何创建Canvas元素、绘制基本图形、绘制路径、使用样式和渐变、绘制文本、使用图像等。
一、创建Canvas元素在HTML中创建Canvas元素非常简单，只需要使用<canvas>标签即可。
例如：```<canvas id="myCanvas" width="500" height="500"></canvas>```其中，id属性用于标识Canvas元素，width和height属性用于设置Canvas的宽度和高度。
需要注意的是，Canvas元素默认的宽度和高度都是300像素，如果不设置width和height属性，Canvas 元素将会显示为一个300x300像素的矩形。
二、绘制基本图形Canvas提供了一些基本的绘图方法，包括绘制矩形、圆形、直线等。
下面是一些常用的绘图方法：1. 绘制矩形绘制矩形可以使用Canvas的rect()方法，该方法接受四个参数，分别是矩形的左上角x坐标、左上角y坐标、矩形的宽度和高度。
例如：```var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.rect(50, 50, 100, 100);ctx.stroke();```上面的代码将在Canvas上绘制一个左上角坐标为(50,50)、宽度为100、高度为100的矩形。
2. 绘制圆形绘制圆形可以使用Canvas的arc()方法，该方法接受五个参数，分别是圆心的x坐标、圆心的y坐标、圆的半径、起始角度和结束角度。
HTML5 Canvas 绘图练习题及答案练习一：绘制基本图形1. 绘制一个红色的正方形，边长为100px。
```html<canvas id="canvas" width="200" height="200"></canvas><script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");ctx.fillStyle = "red";ctx.fillRect(50, 50, 100, 100);</script>```2. 绘制一个蓝色的圆形，半径为50px。
```html<canvas id="canvas" width="200" height="200"></canvas><script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");ctx.fillStyle = "blue";ctx.beginPath();ctx.arc(100, 100, 50, 0, 2 * Math.PI);ctx.closePath();ctx.fill();</script>```3. 绘制一个绿色的三角形，顶点坐标分别为(100, 50)，(150, 150)，(50, 150)。
```html<canvas id="canvas" width="200" height="200"></canvas><script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");ctx.fillStyle = "green";ctx.beginPath();ctx.moveTo(100, 50);ctx.lineTo(150, 150);ctx.lineTo(50, 150);ctx.closePath();ctx.fill();</script>```练习二：绘制图形组合1. 绘制一个由一个红色正方形和一个蓝色圆形组合而成的图形。
HTML5之Canvas绘图——使⽤Canvas绘制图形的基本教程HTML5⽕的正热，最近有个想法也是要⽤到HTML的相关功能，所以也要好好学习⼀把。
好好看了⼀下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了⼀下Canvas绘图，下边是⼏个实例，记下以备后⽤。
1、使⽤Canvas绘制直线：<!doctype html><html><head><meta charset="UTF-8"></head><style type="text/css">canvas{border:dashed 2px #CCC}</style><script type="text/javascript">function $$(id){return document.getElementById(id);}function pageLoad(){var can = $$('can');var cans = can.getContext('2d');cans.moveTo(20,30);//第⼀个起点cans.lineTo(120,90);//第⼆个点cans.lineTo(220,60);//第三个点（以第⼆个点为起点）cans.lineWidth=3;cans.strokeStyle = 'red';cans.stroke();}</script><body onload="pageLoad();"><canvas id="can" width="400px" height="300px">4</canvas></body></html>这⾥⽤到的两个API⽅法，moveTo和lineTo分别是线段的起点和终点坐标，变量为（X坐标,Y坐标）,strokeStyle、stroke分别路径绘制样式和绘制路径。
