HTML5 canvas全解析

合集下载

使用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页⾯的基本代码模板。

html5中Canvas为什么要用getContext（2d）

html5中Canvas为什么要⽤getContext（2d）HTML DOM getContext() ⽅法HTML DOM Canvas 对象定义和⽤法getContext() ⽅法返回⼀个⽤于在画布上绘图的环境。

语法Canvas.getContext(contextID)参数参数 contextID 指定了您想要在画布上绘制的类型。

当前唯⼀的合法值是 "2d"，它指定了⼆维绘图，并且导致这个⽅法返回⼀个环境对象，该对象导出⼀个⼆维绘图 API。

提⽰：在未来，如果 <canvas> 标签扩展到⽀持 3D 绘图，getContext() ⽅法可能允许传递⼀个 "3d" 字符串参数。

返回值⼀个 CanvasRenderingContext2D 对象，使⽤它可以绘制到 Canvas 元素中。

描述返回⼀个表⽰⽤来绘制的环境类型的环境。

其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。

当前，唯⼀⽀持的是 "2d"，它返回⼀个 CanvasRenderingContext2D 对象，该对象实现了⼀个画布所使⽤的⼤多数⽅法。

举个简单的例⼦，画⼀个五⼦棋棋盘为例：<canvas id="chess" width="450px" height="450px"></canvas>var chess = document.getElementById("chess");var context = chess.getContext("2d");context.strokeStyle = "#0A0A0A";var logo = new Image();logo.src = "image/chess.jpg";//图⽚加载完毕后的回调⽅法logo.onload = function(){//画键盘context.drawImage(logo, 0, 0, 450, 450);drawChessBorad();}var drawChessBorad = function(){for(var i = 0; i < 15; i++){context.moveTo(15 + i*30, 15);context.lineTo(15 + i*30, 435);context.moveTo(15, 15 + i*30);context.lineTo(435, 15 + i*30);context.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="myCanvas" width="400" height="300"/> Step2: 通过JavaScript来进⾏绘制：⽅法⼀：<script src="canvas.js"></script> ⽅法⼆：<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的对象。

4.5 setLineDash()方法[共2页]

654.5　setLineDash()方法当lineJoin 属性取值为bevel 时，预览效果如图4-10所示。

在Canvas 中，lineCap 属性用于定义线条“开始处和结尾处”的样式，而lineJoin 属性用于线条“交接处”的样式。

cap 英文意思是“帽子”，而join 英文意思是“关节”。

新手很容易将lineCap 和lineJoin 搞混，其实大家根据英文意思来理解，就很容易区分了。

给大家一个建议：在学习Web 技术的各种属性或方法时，建议从它们英文意思角度来考虑，这样很多东西立刻就理解了。

4.5　setLineDash()方法在Canvas 中，我们可以使用setLineDash()方法来定义线条的虚实样式。

语法：cxt.setLineDash(array);说明：参数array 是一个数组组合，常见的数组组合如图4-11所示。

数组[10,5]表示的是“10px 实线”和“5px 空白”重复拼凑组合而成的线型。

同理，数组[10,5,5,5]表示的是“10px 实线、5px 空白、5px 实线、5px 空白”重复拼凑组合而成的线型，以此类推。

需要注意的是， Google、Firefox 浏览器支持setLineDash()方法，但是IE 浏览器却不支持。

举例：<!DOCTYPE html><html xmlns="/1999/xhtml"><head> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> function $$(id) { return document.getElementById(id); } window.onload = function () { var cnv = $$("canvas");var cxt = cnv.getContext("2d");图4-10　lineJoin属性（取值为bevel）图4-11　setLineDash()方法参数取值。

HTML5 canvas 初级入门教程

HTML5 canvas 初级入门教程HTML5 canvas 即 HTML5 画布，是一个现代浏览器都支持的 HTML5 非插件绘图的功能，本文将展示如何通过 HTML5 canvas API 操作 canvas 元素、绘制图形、改变绘图颜色以及删除图形，让我们开始进入这很酷的新技术的短暂旅行吧。

canvas 元素简介使用 canvas 元素相当简单，它只是一个单纯的 HTML 标签，外加宽高两个特性。

<canvas width="500" height="500">  </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 设置画布尺寸会引起奇怪的效果。

h5 canvas 抗锯齿原理解释说明

h5 canvas 抗锯齿原理解释说明1. 引言1.1 概述本文旨在深入解释和说明H5 Canvas抗锯齿的原理。

在进行H5 Canvas绘图时，抗锯齿是一个重要的技术，可以有效减少图形边缘的锯齿状现象，使图像更加清晰平滑。

本文将介绍什么是抗锯齿、抗锯齿的原理以及H5 Canvas中常用的抗锯齿技术。

1.2 文章结构文章主要包括以下几个部分：2. H5 Canvas 抗锯齿原理：详细介绍什么是抗锯齿以及其原理，为后续内容铺垫。

3. 抗锯齿实现方式：介绍多重采样抗锯齿（MSAA）、超采样抗锯齿（SSAA）以及基于滤波器的抗锯齿（FXAA、SMAA等）这三种常见的抗锯齿实现方式。

4. 抗锯齿在H5 Canvas中的应用场景和效果分析：讨论不同应用场景下使用抗锯齿技术的意义和效果，特别是游戏开发、图形绘制和动画绘制方面。

5. 结论：对本文进行总结，并对未来抗锯齿技术的发展做出展望。

1.3 目的通过本文的阐述，旨在帮助读者了解H5 Canvas抗锯齿原理，在实际应用中选择合适的抗锯齿实现方式，提升图形质量和用户体验。

无论是游戏开发者、图形设计师还是H5开发人员，都可以从中获取到有关抗锯齿技术的有价值信息。

同时，也为未来H5 Canvas抗锯齿技术的研究和发展提供一定的参考。

2. H5 Canvas 抗锯齿原理：2.1 什么是抗锯齿：抗锯齿是一种图形处理技术，旨在减少图像边缘的锯齿状感觉，使其更加平滑和自然。

在绘制线条、文字或图形时，由于像素网格的离散性质，会导致边缘呈现出明显的锯齿状。

2.2 抗锯齿的原理：抗锯齿通过柔化图像边缘来减少锯齿状感觉。

其中最常用和效果最好的方法是在具有高分辨率细节的区域周围添加透明度渐变。

这种渐变将从主要颜色逐渐过渡到背景颜色，使得边缘部分变得更柔和。

H5 Canvas中常用的抗锯齿技术有以下几种：- 多重采样抗锯齿（MSAA）：多重采样抗锯齿是一种硬件级别的抗锯齿技术，在绘制过程中对每个像素进行多次子采样。

[HTML5资料]Canvas教程

HTML5资料1Canvas教程<canvas>是一个新的用于通过脚本（通常是JavaScript）绘图的HTML元素。

例如，他可以用于绘图、制作图片的组合或者简单的动画（当然并不那么简单）。

It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations.1.1基本用法Basic usage<canvas>元素Let's start this tutorial by looking at the <canvas> element itself.让我们从<canvas>元素的定义开始吧。

<canvas id="tutorial" width="150" height="150"></canvas>This looks a lot like the <img> element, the only difference is that it doesn't have the src and alt attributes. <canvas>看起来很像<img>，唯一不同就是它不含 src 和 alt 属性。

The <canvas> element has only two attributes - width and height. These are both optional and can also be set using DOM properties or CSS rules.它只有两个属性，width 和 height，两个都是可选的，并且都可以 DOM 或者 CSS 来设置。

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分别路径绘制样式和绘制路径。

HTML5 Canvas平移,放缩,旋转演示

HTML5 Canvas中提供了实现图形平移，旋转，放缩的API。

平移(translate)平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y)，原来的(0,0)坐标则变成(-x, -y)图示如下：任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移点坐标translate(x, y)。

代码演示：// translate is move the startpoint to centera and back to top left cornerfunction renderText(width, height, context) {context.translate(width/ 2, height / 2); // 中心点坐标为(0, 0)context.font="18px Arial";context.fillStyle="blue";context.fillText("Please Press <Esc> to Exit Game",5,50);context.translate(-width/2, -height/2); // 平移恢复(0,0)坐标为左上角context.fillText("I'm Back to Top",5,50);}放缩(Scale)Scale(a, b)意思是将对象沿着XY轴分别放缩至a*x, b*y大小。

效果如图示：// translation the rectangle.function drawPath(context) {context.translate(200,200);context.scale(2,2);// Scale twice size of original shapecontext.strokeStyle= "green";context.beginPath();context.moveTo(0,40);context.lineTo(80,40);context.lineTo(40,80);context.closePath();context.stroke();}旋转(rotate)旋转角度rotate(Math.PI/8)旋转前的坐标p(x, y)在对应的旋转后的坐标P(rx, ry)为Rx = x * cos(-angle) - y * sin(-angle);Ry = y * cos(-angle) + x * sin(-angle);旋转90度可以简化为：Rx = y;Ry = -x;Canvas中旋转默认的方向为顺时针方向。

使用HTML5canvas做地图（2）瓦片以及如何计算的

使⽤HTML5canvas做地图（2）⽡⽚以及如何计算的上⼀篇也说到⽡⽚，我们为什么使⽤⽡⽚？这⼀篇主要是关于如何拼接地图？下⾯的⼀张图，可以⼀眼明了，地图是如何切割以及拼接的。

⽡⽚信息包括切图原点，⽡⽚⼤⼩，格式，分辨率以及分辨率级别等。

切图原点，⼀般是整个坐标系的最左上⾓，⽐如说，web墨卡托是[-20037508.3427892, 20037508.3427892]。

切图原点右侧列数是正数，左侧的列数是负数，下侧⾏数是正数，上侧⾏数是负数。

⽡⽚的宽度、⾼度，⽬前互联⽹最常见的⽡⽚宽度和⾼度都是256像素。

⽡⽚格式，可能是png,jpg等。

分辨率，这⾥不是指电脑的分辨率。

⽽这⾥意思是⼀像素代表多少⽶，类似于⽐例尺。

分辨率级别，含有若⼲级别的分辨率，不同的分辨率下⾯，显⽰不同的要素信息。

例如，低分辨率下⾯，显⽰洲名称和海洋名称。

中分辨率下⾯，显⽰省名。

⾼分辨率下⾯，就显⽰POI信息。

互联⽹企业当中分辨率级别数在20上下。

地图范围，切图的范围，只在这个范围下⾯才切图，其他的区域都没有相应的⽡⽚。

如果把所有的分辨率都切完的话，是⾮常耗时间的。

仅仅是中国区域，⼀台8核的机器，也得需要⼀个⽉才能切完，更何况全世界了。

⾕歌使⽤的web墨卡托投影，分辨率级别⼀共22级，他的每⼀级分辨率⼤⼩20037508.3427892*2/(256*(2^i))。

20037508.3427892*2代表整个的X轴范围，256代表图⽚的像素⼤⼩，2代表是0级时有两列（有的地图0级只有1列，这个时候就是2^(i-1)），i代表级别。

这个时候，分辨率集合就是[78271.51696402031, 39135.758482010155, 19567.879241005077, 9783.939620502539,4891.969810251269, 2445.9849051256347, 1222.9924525628173, 611.4962262814087, 305.74811314070433, 152.87405657035217, 76.43702828517608, 38.21851414258804, 19.10925707129402, 9.55462853564701, 4.777314267823505, 2.3886571339117526,1.1943285669558763, 0.5971642834779382, 0.2985821417389691, 0.14929107086948454, 0.07464553543474227,0.037322767717371134]。

解析html并使用canvas进行渲染

解析html并使⽤canvas进⾏渲染在学习html5的时候，使⽤canvas实现了对html⽂本的解析和渲染，⽀持的tag有<p>、<i>、<b>、<u>、<ul>、<li>，并参考chrome对不规则html进⾏了解析。

代码扔在了我的github上(https:///myhonor2013/gadgets，⾥⾯的html-render-with-canvas⽬录⾥⾯)。

程序的主函数是个循环，对html⽂本从左往右进⾏解析，wangy每个循环开始处指向有效的html '<'位置，例如'<p'、'<\'、'<f'、'<\x'等都是有效的，⽽'< p'、'< \'、'< \x'等都是⽆效的，总之'<'后⾯必须紧跟⼀个⾮空字符，这是参考了chrome的解析得出的结论。

这也就意味着每个循环的末尾必须找到第⼀个类似的位置才能结束循环。

在每次循环末尾调⽤渲染函数在canvas上进⾏渲染。

在循环的过程中要时刻注意html字符串指针是否越界，如果越界则结束循环进⾏渲染。

⼀、预处理预处理简单地对html⽂本中连续的空字符（回车、tab、缩进）⽤单个的空格进⾏了替换：var text=data.text.replace(/[\r\n\t]/g,WHITESPACE).replace(/\s+/g,WHITESPACE).trim();然后从html⽂本开始位置寻找第⼀个所谓的有效tag位置，并对此位置之前的⽂本进⾏渲染。

以下则每次循环都以有效的'<'开始。

这⼜分两种情况：有效开标签和有效闭标签。

⼆、有效开标签的处理有效开标签即'<'后⾯不是'\'的标签，⽤正则表达式就是^<[^\/]+.*。

05- HTML5画布canvas-2

他们的效果会累加~！
一、Canvas坐标变换
• 练习：尝试绘制出如下图形
一、Canvas坐标变换
位移，旋转，缩放会更改canvas的状态。防止多个图形的变换相互影响，可以通过： ctx.save(); Save（）一定要写在变形，缩放，位移等等变换的前面。 ctx.restore(); save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作 restore：用来恢复Canvas之前保存的状态。防止save后对Canvas 执行的操作对后续的绘制有影响。
可以展示部分图像
• ctx.drawImage( img,sx,sy,swidth,sheight,x,y,width,height ); 在画布上裁切图片部分，sx,sy,swidth,sheight 控制裁切左边和大小二、Canvas使用图像
• 会出现第一次打开页面看不到图像的bug。原因：图像加载是需要时间的，图像还没加载完毕，canvas就开始画图了。
HTML5画布canvas
目录
• Canvas坐标变换位移，缩放，旋转 Canvas存储与恢复（位移，缩放，旋转等）状态 • Canvas使用图像绘制图像，平铺，裁切 • Canvas使用文字描边文字，填充文字
一、Canvas坐标变换
• Canvas坐标原点，默认在左上角。
一、Canvas坐标变换
一、Canvas坐标变换
二、Canvas使用图像
• ctx.drawImage( img , x , y); 在画布上（x，y）坐标定位图像
img 指：图像对象，或图片标签、视频
可以缩放图像
• ctx.drawImage( img,x,y, width , height ); 在画布上（x，y）坐标定位图像，并设置图片大小

[js高手之路]html5canvas系列教程-文本样式（strokeText,fillT。。。

[js⾼⼿之路]html5canvas系列教程-⽂本样式（strokeText,fillT。

接着上⽂线条样式继续.canvas提供两种输出⽂本的⽅式：strokeText：描边⽂本fillText：填充⽂本fillStyle配合fillText使⽤，strokeStyle配合strokeText使⽤strokeText⽤法：cxt.strokeText( text， x, y, [maxwidth] )text：需要输出的⽂本内容x：最左边的⽂本输出的横坐标位置y：最左边的⽂本的左下⾓的纵坐标maxWidth：这个是可选参数，意思就是⽂本最多能占⽤maxWidth这么宽，如果⽂本的实际宽度⽐maxWidth宽，就会有⼀种压缩(被挤扁)的效果。

1 <meta charset='utf-8' />2 <style>3 body {4 background: #000;5 }6 #canvas{7 background:white;8 }9 </style>10 <script>11 window.onload = function(){12var oCanvas = document.querySelector( "#canvas" ),13 oGc = oCanvas.getContext( '2d' ),1415 text = '跟着ghostwu学习canvas';16 oGc.font = 'bold 30px 微软雅⿊';17 oGc.strokeStyle = '#09f';18 oGc.strokeText( text, 100, 100 );19 oGc.strokeText( text, 100, 200, 200 );20 }21 </script>22 </head>23 <body>24 <canvas id="canvas" width="600" height="300"></canvas>25 </body>fillText：填充⽂本，参数跟strokeText⼀样text = '跟着ghostwu学习canvas';oGc.font = 'bold 30px 微软雅⿊';oGc.fillStyle = '#09f';oGc.fillText( text, 100, 100 );oGc.fillText( text, 100, 200, 200 );measureText：获取⽂本的宽度(长度)，它返回的是⼀个对象，对象有⼀个属性width，就是⽂本的长度了.cxt.measureText( text ).width输出⼀段⽔平居中的⽂本1 <meta charset='utf-8' />2 <style>3 body {4 background: #000;5 }6 #canvas{7 background:white;8 }9 </style>10 <script>11 window.onload = function(){12var oCanvas = document.querySelector( "#canvas" ),13 oGc = oCanvas.getContext( '2d' ),14 width = oCanvas.width,15 text = '跟着ghostwu学习canvas';1617 oGc.font = 'bold 30px 微软雅⿊';18 oGc.fillStyle = '#09f';19 oGc.fillText( text, ( width - oGc.measureText( text ).width ) / 2, 100 );20 }21 </script>22 </head>23 <body>24 <canvas id="canvas" width="600" height="300"></canvas>25 </body>font属性跟css是⼀样的⽤法cxt.font = "font-style font-weight font-size/line-height font-family" textAlign：⽂本⽔平对齐⽅式cxt.textAlign = 'start/end/left/right/center';start跟left差不多，end跟right差不多.1 <meta charset='utf-8' />2 <style>3 body {4 background: #000;5 }6 #canvas{7 background:white;8 }9 </style>10 <script>11 window.onload = function(){12var oCanvas = document.querySelector( "#canvas" ),13 oGc = oCanvas.getContext( '2d' ),14 width = oCanvas.width,15 height = oCanvas.height,16 text = '跟着ghostwu学习canvas';1718 oGc.font = 'bold 16px 微软雅⿊';19 oGc.fillStyle = '#09f';2021var xPos = ( width ) / 2;22 oGc.moveTo( xPos, 0 );23 oGc.lineTo( xPos, height );24 oGc.stroke();2526 oGc.textAlign = 'start';27 oGc.fillText( text, 300, 30 );28 oGc.textAlign = 'left';29 oGc.fillText( text, 300, 60 );30 oGc.textAlign = 'right';31 oGc.fillText( text, 300, 90 );32 oGc.textAlign = 'end';33 oGc.fillText( text, 300, 120 );34 oGc.textAlign = 'center';35 oGc.fillText( text, 300, 150 );36 }37 </script>38 </head>39 <body>40 <canvas id="canvas" width="600" height="300"></canvas>41 </body>textBaseline：设置⽂本垂直⽅向的对齐⽅式cxt.textBaseline = '属性值'常见的属性值: alphabetic, top, middle, bottom等跟上⾯的textAlign的⽤法差不多，这个不是很常⽤。

第6章 HTML5的canvas绘图

根据中间那个矩阵的不同，我们就可以得到不同的变换效果。
矩阵乘法是这样定义的：假设有两个矩阵A和B ，如果要通过A*B得到C，那么矩阵A的列数必须与矩阵B的行数相同，方才能进行运算。得到的新的矩阵的第 i 行，第 j 列的值就是A的第 i 行与 B 的第 j 列相对应的值相乘，然后相加的结果。
HTML5+CSS3 Web 前端开发技术
6.6 在canvas中使用图像
首先，我们来看看图形在画布上的移动。算法很简单：
X’ = X + a
Y’ = Y + b
这样就把点(X,Y)移动到了(X’,Y’)。
对应的变换的矩阵就是
X’ 1 0 a
X
Y’ = 0 1 b * Y
1
001
1
X’ = 1*X + 0*Y + a*1;
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值
HTMLc5t+xC.rSoSt3aWtee(ba前n端g开le发);技术
6.5 使用坐标变换和矩阵变换绘图
示例6-15（script15.js）中使用坐标变换方法绘制了一组变形图形。
HTML5+CSS3 Web 前端开发技术
交汇处的拐角形状
角
round：创建圆角拐角
bevel：创建斜角拐角
HTML5+CSS3 Web 前端开发技术
6.3 使用路径绘制图形
示例6-8(script08.js)绘制了宽度从2像素到10像素不等的5 条直线。
HTML5+CSS3 Web 前端开发技术
6.3 使用路径绘制图形
6-9 (script09.js)示例中先用数组保存butt、round、square三种线条端点属性值，然后使用循环访问数组元素，为每条直线添加不同端点。

html5点线的设置,html5 Canvas画图教程

html5点线的设置,html5 Canvas画图教程
假如你还不知道canvas是什么，可以看看。

在学画画的时候，线条是最基本的了，而线条的衔接可以组成任何图形。

在canvas中也是如此。

在开头之前我们先拿出画布和画笔：
复制代码代码如下：
var cvs = document.getelementbyid（&39;cvs&39;）; //画布
var ctx = cvs.getcontext（&39;2d&39;）; // 画笔我们画画的时候，落笔点是不固定的，随时都会变。

canvas虽然不是通过手来打算落笔点，但也有一个办法，就是moveto。

moveto的作用相当于把笔尖提离画布，然后移动到指定的点（即坐标）。

复制代码代码如下：
ctx.moveto（x,y）
此过程中不会画出任何图形，相当于你提着笔在画布上晃来晃去。

但晃来晃去是没用的，我们必需开头画。

先画最容易的：直线
画直线的办法即lineto，他的参数和moveto一样的，都是一个点。

第1页共8页。

lucky-canvas的原理

lucky-canvas的原理全文共四篇示例，供读者参考第一篇示例：lucky-canvas是一个基于HTML5的绘图库，可以帮助开发者创建各种各样的绘图和动画效果。

它的原理是利用HTML5中的Canvas 元素来实现绘图功能，通过在Canvas上绘制图形和文字来实现各种效果。

本文将从Canvas的基本原理、lucky-canvas的特点和使用方法等方面来介绍lucky-canvas的原理。

我们先来了解一下HTML5中的Canvas元素。

Canvas元素是一个矩形区域，可以用来绘制图形（比如矩形、圆形、直线等）和文字。

通过JavaScript脚本，我们可以在Canvas上绘制各种图形和文本，从而实现各种绘图效果。

Canvas元素是HTML5中的重要特性之一，它为Web开发者提供了更灵活和强大的图形绘制能力。

接着，我们来看看lucky-canvas的特点。

lucky-canvas是一个轻量级的HTML5绘图库，它提供了丰富的API，可以帮助开发者轻松实现各种绘图和动画效果。

lucky-canvas具有以下几个特点：1. 简单易用：lucky-canvas提供了简洁明了的API，开发者可以很容易地实现各种绘图效果。

2. 支持动画：lucky-canvas支持动画效果，开发者可以通过设置动画帧来创建丰富的动画效果。

3. 兼容性好：lucky-canvas基于HTML5标准开发，可以在各种现代浏览器上运行，并且支持移动端设备。

4. 定制性强：lucky-canvas提供了丰富的绘图功能和样式设置接口，开发者可以根据自己的需求来定制绘图效果。

lucky-canvas还提供了丰富的绘图API，包括绘制矩形、圆形、直线、贝塞尔曲线、文本等功能。

开发者可以通过调用这些API来实现各种绘图效果。

lucky-canvas还支持图像加载和处理，可以用来实现图片滤镜、裁剪等功能。

使用lucky-canvas非常简单。

开发者只需要在HTML页面中引入lucky-canvas的JavaScript文件，并创建一个Canvas元素，然后通过JavaScript脚本来绘制图形和文本。

波形运动_Web前端开发精品课——HTML5 Canvas开发详解_[共5页]

14.3　三角函数应用
var radiusY = 40;
var angle = 0;
(function frame() {
window.requestAnimationFrame(frame);
cxt.clearRect(0, 0, cnv.width, cnv.height);
//计算小球坐标
ball.x = centerX + Math.cos(angle) * radiusX;
ball.y = centerY + Math.sin(angle) * radiusY;
ball.ﬁll(cxt);
//角度递增
angle += 0.05;
})();
}
</script>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px solid silver;"></canvas>
</body>
</html>
所示。

在浏览器中的预览效果如图14-16
图14-16　椭圆运动
分析：
同样地，我们只需要把椭圆的极坐标公式套进去就行了。

14.3.3　波形运动
学过高中数学的小伙伴都知道，正弦函数sin和余弦函数cos都有属于它们自身的波形。

由于这两个函数的波形是非常相似的，下面只拿sin来介绍就行了。

217。

外接圆判定法_Web前端开发精品课——HTML5 Canvas开发详解_[共4页]

27116.3　外接圆判定法此外，对于碰撞检测的外接矩形判定法，有以下两点需要跟大家说一下。

（1）本节使用的getRect()方法只针对圆形小球而言，对于其他不规则图形如五角星、心形等，则需要根据它们的形状特点，然后定义一个属于它们自己的外接矩形的方法。

（2）对于任何物体的碰撞检测，只要这个物体是一个矩形或者近似矩形，我们都可以把这个物体抽象成一个矩形，然后使用外接矩形判定法来进行碰撞检测。

16.3　外接圆判定法外接圆判定法，指的是如果检测物体是一个圆或者近似圆，我们可以把这个物体抽象成一个圆，然后用判断两个圆是否碰撞的方法进行检测。

说白了，就是把它看成一个圆来处理。

对于外接圆判定法，一般也需要两个步骤，即找出物体的外接圆、对外接圆进行碰撞检测。

想要找出物体的外接圆，也很简单，即选择一个物体，在它周围画一个圆。

然后这个外接圆可以把这个物体圈起来就可以了。

按照以上方法，对于图16-7中的几个图形，我们找出它们的外接矩形如图16-8所示。

图16-8中的五角星、心形这两对图形，看似没有碰上，但是如果是根据它们的外接圆来判断，事实上它们每一对都碰上了。

图16-7　没有加入外接圆图16-8　加入外接圆在实际开发中，什么时候用外接矩形判定法，什么时候用外接圆判定法，取决于物体的形状。

一句话：哪个方法误差较小，就用哪个。

判断两个圆是否发生碰撞，只需要判断：两个圆心之间的距离。

如果两个圆心之间的距离大于或等于两个圆的半径之和，则两个圆没有发生碰撞；如果两个圆心之间的距离小于两个圆的半径之和，则两个圆发生了碰撞。

语法：window.tools.checkCircle = function (circleB, circleA) { var dx = circleB.x - circleA.x;。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

下一页：canvas径向渐变示例
canvas径向渐变示例
var radgrad = ctx.createRadialGradient(75,75,1, 75,75,60);  radgrad.addColorStop(0, '#A7D30C'); radgrad.addColorStop(0.9, '#019F62'); radgrad.addColorStop(1, 'rgba(1,159,98,0)'); ctx.fillStyle = radgrad; ctx.fillRect(0,0,150,150);
示例
下一页：绘制线性渐变
HTML DOM createLinearGradient(பைடு நூலகம் 方法
定义和用法 createLinearGradient() 方法创建一条线性颜色渐变。语法 createLinearGradient(xStart, yStart, xEnd, yEnd)
这个方法创建并返回了一个新的 CanvasGradient 对象，它在指定的起始点和结束点之间线性地内插颜色值。注意，这个方法并没有为渐变指定任何颜色。使用返回对象的 addColorStop() 来做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。
返回值表示一个放射性颜色渐变的一个 CanvasGradient 对象。描述这个方法创建并返回了一个新的 CanvasGradient 对象，该对象在两个指定圆的圆周之间放射性地插值颜色。注意，这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。要使用一个渐变来勾勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。放射性渐变的绘制方法使用第一个圆的圆周在偏移 0 处的颜色和第二个圆的圆周在偏移 1 处的颜色，在两个位置之间的圆上插入颜色值（红色、绿色、蓝色和 alpha）。
线的链接样式 lineJoin
'round','bevel','miter'
绘制渐变
绘制线性渐变绘制径向渐变
下一页：绘制阴影
给图形绘制阴影
shadowOffsetX——阴影的横向移动 shadowOffsetY——阴影的纵向移动 shadowColor——阴影的颜色 shadowBlur——阴影的模糊范围

返回值一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。
描述返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。
}
绘制图形
HTML DOM getContext() 方法
定义和用法 getContext() 方法返回一个用于在画布上绘图的环境。语法 Canvas.getContext(contextID) 参数参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 “3d” 字符串参数。（即现在不仅能支持“2D”）。
放置Canvas
<style type="text/css"> .canvas { width:150px; height:150px;} canvas { border: 1px solid black;} </style>
<body onload="draw();"> <div class="canvas"> <canvas id="canvas" width="150" height="150"> <p>写在这里面的内容将展示给不兼容canvas的浏览器 </p> </canvas> </div> </body> 演示（canvas 基础测试模板2.html）
示例
下一页：canvas径向渐变
返回
HTML DOM createRadialGradient() 方法
定义和用法 createRadialGradient() 方法创建一条放射颜色渐变。语法 createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)
HTML5 Canvas
I. Canvas基础 II. 设置Canvas绘图样式 III.canvas绘制图形 IV.Canvas引用图像 V. Canvas的画布处理 VI.Canvas的图形组合 VII.Canvas绘制文字 VIII.Canvas其他知识
•保存与恢复 •保存文件 •获取像素信息 •基本动画
下一页：canvas绘制图形
通过JS在画布上绘制图形
使用路径
beginPath() stopPath() moveTo() lineTo() 绘制矩形 Rect() fillRect() clearRect() 绘制圆形 arc() 绘制贝塞尔曲线
quadraticCurveTo() bezierCurveTo()
Canvas基础
Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个 canvas元素就相当于在页面上放置了一块 “画布”，可以在其中进行图形的描绘。 Canvas的绘制需要通过JS编写在其中进行绘画的脚本。
Canvas元素的基础知识
<canvas>看起来很像<img>，唯一不同就是它不含 src 和 alt 属性。它只有两个属性，width 和 height，两个都是可选的，并且都可以 DOM 或者 CSS 来设置。如果不指定width 和 height，默认的是宽300像素，高150像素。虽然可以通过 CSS 来调整canvas的大小，但渲染图像会缩放来适应布局的。结束标签 </canvas> 是必须的
HTML DOM lineTo() 方法
定义和用法 lineTo() 方法为当前子路径添加一条直线。语法 lineTo(x, y) 参数描述 x, y直线的终点的坐标。描述 lineTo() 方法为当前子路径添加一条直线。这条直线从当前点开始，到 (x, y) 结束。当方法返回时，当前点是 (x,y)。
ctx.strokeStyle="rgb(200,0,0)"; ctx.fillStyle="rgb(255,0,0)"; ctx.shadowOffsetX=3; ctx.shadowOffsetY=3; ctx.shadowColor="rgba(150,0,0,0.2)"; ctx.shadowBlur=3; ctx.beginPath(); ctx.moveTo(75,60); ctx.bezierCurveTo(125,20,125,100,75,115); ctx.bezierCurveTo(25,100,25,20,75,60); ctx.stroke(); ctx.fill();
*对照moveTo ,lineTo就相当于在刚刚提笔到的地方开始画一条线，这条线的结束点就是（x，y），另外就是直线画到这里，当前画笔的位置就到了（x，y）这个点。后面的画矩形就不是了。示例
下一页：HTML DOM rect() 方法
返回
HTML DOM rect() 方法
定义和用法 rect() 方法为当前路径添加一条矩形子路径。语法 quadraticCurveTo(x, y, width, height) 参数描述x, y矩形的左上角的坐标。width, height矩形的大小。描述 rect() 方法为路径添加了一个矩形。这个矩形是路径的一个子路径并且没有和路径中的任何其他子路径相连。 *当 rect() 方法返回时，当前位置是 (0,0)。
语法
window.moveTo(x,y)
参数描述
x窗口新位置的 x 坐标y窗口新位置的 y 坐标
*注：moveTo其实就相当于我们画图时提起画笔到画布的另一个地方，在这个过程中我们并没有进行绘制路径。具体用的时候像：开始在哪画、画完一笔之后再到哪里去画之类的用法。下一页：HTML DOM lineTo() 方法
ctx.beginPath(); ctx.moveTo(1,1); ctx.arc(50,50,30,0,Mat.PI*2,true); ctx.lineTo(150,150); ctx.closePath(); ctx.stroke(); /*这个例子中我们发现当用了moveTo之后如果再用arc那么moveTo的点会自动连接到圆的起点而lineTo则从圆的终点开始，颠倒顺序后，lineTo的终点又会自动连接到圆的起点*/
strokeRect()
Fill() strock()
使用图像