Html5中的图形绘制
- 格式：doc
- 大小：70.00 KB
- 文档页数：13
文档推荐
-
简单教你绘制三维实体机械零件图页数:19
-
CAD三维制图(初级入门)页数:95
-
三维图形的绘制页数:8
-
CAD三维图简单的绘制方法页数:3
-
第十六课时绘制三维图形页数:21
-
怎样用CAD绘制简单的三维图页数:14
下载文档原格式
合集下载
使用HTML5Canvas绘制直线或折线等线条的方法讲解
使⽤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画图教程（2）—画直线与设置线条的样式如颜色端点交汇点
html5Canvas画图教程（2）—画直线与设置线条的样式如颜⾊端点交汇点如果你还不知道Canvas是什么，可以看看上⼀篇.在学画画的时候，线条是最基本的了，⽽线条的连接可以组成任何图形。
在Canvas中也是如此。
在开始之前我们先拿出画布和画笔：复制代码代码如下:var cvs = document.getElementById('cvs'); //画布var ctx = cvs.getContext('2d'); // 画笔我们画画的时候，落笔点是不固定的，随时都会变。
canvas虽然不是通过⼿来决定落笔点，但也有⼀个⽅法,就是moveTo。
moveTo的作⽤相当于把笔尖提离画布，然后移动到指定的点（即坐标）。
复制代码代码如下:ctx.moveTo(x,y)此过程中不会画出任何图形，相当于你提着笔在画布上晃来晃去。
但晃来晃去是没⽤的，我们必须开始画。
先画最简单的：直线画直线的⽅法即lineTo，他的参数和moveTo⼀样的，都是⼀个点。
ctx.lineTo(x,y)当然，你画线的时候，落笔点也跟着移动了，所以lineTo之后落笔点就变成了他的⽬标点了。
复制代码代码如下:ctx.moveTo(100,100);ctx.lineTo(200,100);此时你刷新⽹页，会发现画布上没有预想中的线，什么也没有。
因为我们还少了⼀个步骤.lineTo其实是画的⼀条“路径”，本⾝是不可见的。
如果要让他显⽰出来，我们必须对他进⾏“画”的操作。
⽤过PS的同学，肯定能知道图形的两种模式，⼀种是填充，另⼀种是描边。
现在我们已经画了⼀条线，相当于PS中勾了⼀条路径，此时给路径描⼀下边，就能显⽰出图形了。
canvas描边的⽅法是stroke().现在让我们把代码补全：复制代码代码如下:ctx.moveTo(100,100);ctx.lineTo(200,100);ctx.stroke();此时刷新，就能看到⼀条线了。
HTML5Canvas学习笔记（canvas绘制线条、矩形、多边形、圆、自定义图像）
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绘图-多边形的绘制
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的对象。
HTML5绘图实验
贵州理工学院实验报告
学院：大数据学院 专业： 网络工程 班级：172
姓名
学号
实验组
1
实验时间
2018.7.25
指导教师
张德跃
成绩
实验项目名称
HTML5绘图实验
实验目的及要求
实验内容:
通过HTML5相关标签于JS操作
实验内容及主要步骤
通过HTML5做一个简单的图片
代码如下：
<span style="font-size:18px;"><!DOCTYPE html>
</div>
</body>
如图所示：
实验总结
在这个实验用我用HTML5绘制了一个简单的图形，虽然绘制的图形简单，但是收获的东西也不少。我希望在下次的学习中能有更多的收获。
指导教师意见
签名：Байду номын сангаас
年 月 日
<canvas id="myCanvasTag" width="400" height="400"
style="background-color:blue;border: 10px yellow solid"></canvas>
<br /><br />
<a href="index.html">back</a>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
学院：大数据学院 专业： 网络工程 班级：172
姓名
学号
实验组
1
实验时间
2018.7.25
指导教师
张德跃
成绩
实验项目名称
HTML5绘图实验
实验目的及要求
实验内容:
通过HTML5相关标签于JS操作
实验内容及主要步骤
通过HTML5做一个简单的图片
代码如下：
<span style="font-size:18px;"><!DOCTYPE html>
</div>
</body>
如图所示：
实验总结
在这个实验用我用HTML5绘制了一个简单的图形，虽然绘制的图形简单，但是收获的东西也不少。我希望在下次的学习中能有更多的收获。
指导教师意见
签名：Байду номын сангаас
年 月 日
<canvas id="myCanvasTag" width="400" height="400"
style="background-color:blue;border: 10px yellow solid"></canvas>
<br /><br />
<a href="index.html">back</a>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
HTML5Canvas实现玫瑰曲线和心形图案的代码实例
HTML5Canvas实现玫瑰曲线和⼼形图案的代码实例效果图：提⽰：把代码复制到⼀个html⽂件中并保存，直接打开即可看到效果。
实现代码：<!DOCTYPE html><html><head><meta charset = "gbk"><title>HTML5 Demo</title><style type="text/css">#apDiv1 {position:absolute;width:120px;height:300px;z-index:1;left: 840px;top: 80px;}</style></head><body><canvas id="canvas" width="800" height="600" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element. </canvas><div id="apDiv1"><form>玫瑰曲线⽅程：<br>r=a+bsin(m/n*x)<br><br>选择参数：<br><br>m: <input type="number" name="m" min="2" max="29" value="29"/><br><br>n: <input type="number" name="n" min="1" max="12" value="11"/><br><br>a: <input type="number" name="a" min="0" max="5" value="1"/><br><br>b: <input type="number" name="b" min="1" max="7" value="5"/><br><br><input type="button" value=" 画图 " onClick="draw();"><br><br><hr><br><input type="button" value=" 画图 2 " onClick="draw2();"><br><br><hr><br><input type="button" value=" ⼼形图 " onClick="draw3();"><br></form></div><script type="text/javascript">function draw() {var ctx = document.getElementById('canvas').getContext('2d');ctx.save();ctx.translate(400,300);ctx.clearRect(-400,-300,800,600);ctx.strokeStyle = "#cc0000";var a = 0, b = 1, m = 6, n = 1;m = document.forms[0].m.value;n = document.forms[0].n.value;a = document.forms[0].a.value;b = document.forms[0].b.value;drawRose(ctx,a,b,m,n);ctx.restore();}function drawRose(ctx,a,b,m,n){ctx.beginPath();var e = 0, c = 120;var k = 2 * Math.PI / 360;do {var r = a/b + Math.sin( m * e / n * k);r = r * c;var x = r * Math.cos( e * k );var y = r * Math.sin( e * k );e += 0.1;ctx.lineTo(x,y);} while ( e <= 4320 );ctx.stroke();}function draw2(){var ctx = document.getElementById('canvas').getContext('2d'); ctx.save();ctx.translate(400,300);ctx.clearRect(-400,-300,800,600);ctx.strokeStyle = "#cc0000";ctx.beginPath(); //ctx.moveTo(0,0);var e = 0, c = 150;var k = 2 * Math.PI / 360;do {x = 150*Math.cos( 5/2 * e*k ) + 50*Math.cos( 15/16 * 5/2 * e*k ); y = 150*Math.sin( 5/2 * e*k ) - 50*Math.sin( 15/16 * 5/2 * e*k );e += 0.1;ctx.lineTo(x,y);} while ( e <= 3600 );ctx.stroke();ctx.restore();}function draw3(){var ctx = document.getElementById('canvas').getContext('2d'); ctx.save();ctx.translate(400,300);ctx.clearRect(-400,-300,800,600);ctx.strokeStyle = "#ff0000";ctx.beginPath();var x = 1, y;do {y = -80*(Math.sqrt(1-x*x) + Math.pow(x*x,1/3));x -= 0.001;ctx.lineTo(100*x,y);} while ( x >= -1 );do {y = 80*(Math.sqrt(1-x*x) - Math.pow(x*x,1/3));x += 0.001;ctx.lineTo(100*x,y);} while ( x <= 1 );ctx.closePath();var grad = ctx.createRadialGradient(-40,-60,10,-40,-40,200); grad.addColorStop(0, "#ffcc00");grad.addColorStop(1, "#ff0000");ctx.fillStyle = grad;ctx.fill();// ctx.stroke();ctx.restore();}window.onload = function (){draw();}</script></body></html>。
HTML5 canvas 初级入门教程
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 设置 画布尺寸会引起奇怪的效果。
canvas的用法
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 绘图练习题及答案
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之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分别路径绘制样式和绘制路径。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
}
}
}
}
}
如下图：
二次贝塞尔曲线及三次贝塞尔曲线节下一个十分有用的路径类型就是贝塞尔曲线。二次及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
你可以尝试一下，使用下边的代码片。只需要将其复制到之前的draw()函数即可。
function draw() {
var canvas = document.getElementById
('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
var x = 25 + j * 50; // x坐标值
var y = 25 + i * 50; // y坐标值
var radius = 20; //圆弧半径
var startAngle = 0; //开始点
var endAngle = Math.PI + (Math.PI * j) / 2; //结束点
var anticlockwise = i % 2 == 0 ? false : true; //顺时针或逆时针
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i>1){
ctx.fill();
} else {
ctx.stroke();
arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
这里详细介绍一下arc方法，该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。
startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); //左眼
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); //右眼
ctx.stroke();
}
}
结果看起来是这样的：
线
绘制直线，需要用到的方法lineTo()。
}
}
输出看上去如下：
移动笔触
一个非常有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。
moveTo(x, y)
将笔触移动到指定的坐标x以及y上。
当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。看一下下面的笑或者圆，我们使用arc()方法。当然可以使用arcTo()，不过这个的实现并不是那么的可靠，所以我们这里不作介绍。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
function draw() {
var canvas = document.getElementById
('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
for(var i = 0; i < 4; i++){
for(var j = 0; j < 3; j++){
1、首先，你需要创建路径起始点。
2、然后你使用画图命令去画出路径。
3、之后你把路径封闭。
4、一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
以下是所要用到的函数：
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上
生成路径。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); //绘制
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); //口(顺时针)
ctx.moveTo(65, 65);
上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。
function draw() {
var canvas = document.getElementById
('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
}
}
显示如下图：
fillRect()函数绘制了一个边长为100px的黑色正方形。
x,y坐标是可变的。半径（radius）和开始角度（startAngle）都是固定的。结束角度（endAngle）在第一列开始时是180度（半圆）然后每列增加90度。最后一列形成一个完整的圆。
clockwise语句作用于第一、三行是顺时针的圆弧，anticlockwise作用于二、四行为逆时针圆弧。if语句让一、二行描边圆弧，下面两行填充路径。
注意：当你调用fill()函数时，所有没有闭合的形状都会
自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
绘制一个三角形节
例如，绘制三角形的代码如下：
function draw() {
var canvas = document.getElementById
下面的这些例子没有多少困难。这两个例子中我们会连续绘制贝塞尔曲线，最后形成复杂的图形。
二次贝塞尔曲线
这个例子使用多个贝塞尔曲线来渲染对话气泡。
function draw() {
var canvas = document.getElementById
('canvas');
if (canvas.getContext) {
clearRect()函数从正方形的中心开始擦除了一个60*60px的正方形，接着strokeRect()在清除区域内生成一个50*50的正方形边框。
接下来我们能够看到clearRect()的两个可选方法，然后我们会知道如何改变渲染图形的填充颜色及描边颜色。
绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。
生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
使用二次以及三次贝塞尔曲线是有一定的难度的，我们所绘制的曲线没有给我们提供直接的视觉反馈。这让绘制复杂的图形变得十分困难。在下面的例子中，我们会绘制一些简单有规律的图形，如果你有时间以及更多的耐心,很多复杂的图形你也可以绘制出来。
注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
弧度=(Math.PI/180)*角度。
下面的例子比上面的要复杂一下，下面绘制了12个不同的角度以及填充的圆弧。
下面两个for循环，生成圆弧的行列（x,y）坐标。每一段圆弧的开始都调用beginPath()。代码中，每个圆弧的参数都是可变的，实际编程中，我们并不需要这样做。
var ctx = canvas.getContext('2d');
//二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.lineTo(25, 105);
ctx.fill();
//描边三角形
ctx.beginPath();
ctx.moveTo(125, 125);
}
}
}
}
如下图：
二次贝塞尔曲线及三次贝塞尔曲线节下一个十分有用的路径类型就是贝塞尔曲线。二次及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
你可以尝试一下，使用下边的代码片。只需要将其复制到之前的draw()函数即可。
function draw() {
var canvas = document.getElementById
('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
var x = 25 + j * 50; // x坐标值
var y = 25 + i * 50; // y坐标值
var radius = 20; //圆弧半径
var startAngle = 0; //开始点
var endAngle = Math.PI + (Math.PI * j) / 2; //结束点
var anticlockwise = i % 2 == 0 ? false : true; //顺时针或逆时针
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i>1){
ctx.fill();
} else {
ctx.stroke();
arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
这里详细介绍一下arc方法，该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。
startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); //左眼
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); //右眼
ctx.stroke();
}
}
结果看起来是这样的：
线
绘制直线，需要用到的方法lineTo()。
}
}
输出看上去如下：
移动笔触
一个非常有用的函数，而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。或者你可以想象一下在纸上作业，一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。
moveTo(x, y)
将笔触移动到指定的坐标x以及y上。
当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点。我们也能够使用moveTo()绘制一些不连续的路径。看一下下面的笑或者圆，我们使用arc()方法。当然可以使用arcTo()，不过这个的实现并不是那么的可靠，所以我们这里不作介绍。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
function draw() {
var canvas = document.getElementById
('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
for(var i = 0; i < 4; i++){
for(var j = 0; j < 3; j++){
1、首先，你需要创建路径起始点。
2、然后你使用画图命令去画出路径。
3、之后你把路径封闭。
4、一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
以下是所要用到的函数：
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上
生成路径。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); //绘制
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); //口(顺时针)
ctx.moveTo(65, 65);
上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。
function draw() {
var canvas = document.getElementById
('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
}
}
显示如下图：
fillRect()函数绘制了一个边长为100px的黑色正方形。
x,y坐标是可变的。半径（radius）和开始角度（startAngle）都是固定的。结束角度（endAngle）在第一列开始时是180度（半圆）然后每列增加90度。最后一列形成一个完整的圆。
clockwise语句作用于第一、三行是顺时针的圆弧，anticlockwise作用于二、四行为逆时针圆弧。if语句让一、二行描边圆弧，下面两行填充路径。
注意：当你调用fill()函数时，所有没有闭合的形状都会
自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
绘制一个三角形节
例如，绘制三角形的代码如下：
function draw() {
var canvas = document.getElementById
下面的这些例子没有多少困难。这两个例子中我们会连续绘制贝塞尔曲线，最后形成复杂的图形。
二次贝塞尔曲线
这个例子使用多个贝塞尔曲线来渲染对话气泡。
function draw() {
var canvas = document.getElementById
('canvas');
if (canvas.getContext) {
clearRect()函数从正方形的中心开始擦除了一个60*60px的正方形，接着strokeRect()在清除区域内生成一个50*50的正方形边框。
接下来我们能够看到clearRect()的两个可选方法，然后我们会知道如何改变渲染图形的填充颜色及描边颜色。
绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。
生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
使用二次以及三次贝塞尔曲线是有一定的难度的，我们所绘制的曲线没有给我们提供直接的视觉反馈。这让绘制复杂的图形变得十分困难。在下面的例子中，我们会绘制一些简单有规律的图形，如果你有时间以及更多的耐心,很多复杂的图形你也可以绘制出来。
注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
弧度=(Math.PI/180)*角度。
下面的例子比上面的要复杂一下，下面绘制了12个不同的角度以及填充的圆弧。
下面两个for循环，生成圆弧的行列（x,y）坐标。每一段圆弧的开始都调用beginPath()。代码中，每个圆弧的参数都是可变的，实际编程中，我们并不需要这样做。
var ctx = canvas.getContext('2d');
//二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.lineTo(25, 105);
ctx.fill();
//描边三角形
ctx.beginPath();
ctx.moveTo(125, 125);