HTML5 Canvas绘图基13
使用HTML5 canvas做地图
使用 HTML5 canvas 做地图（ 3） 图片加载平移放大缩小终于开始可以写代码了，手都开始痒了。
这里的代码仅仅是在 chrome 检测 过，我可以肯定的是 IE10 以下浏览器是行不通，我一直在考虑，是不是使用 IE 禁止看我的篇博客，就是这群使用 IE 的人，给我加了很多工作量。
一个地图的基本动作，无非就是加载数据，平移，放大与缩小。
这篇博客主 要是通过一张图片的方式来模拟一下。
我这里认为大家都稍微了解甚至熟悉 canvas 的一些 API，就不具体说，每 一个参数代表什么意思了。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 5 6 7 8 9 10 11 12 13 14 15 </head> 16 <body> 17 18 19 </body> 20 </html> 1 2 3 4<meta charset='utf-8'> <title>图片加载平移放大缩小示例</title> <style> html,body{ margin:0px; padding:0px; } canvas{ border: 1px solid #000; } </style><canvas id="canvas" width="800" height="800"></canvas> <script type="text/javascript" src="main.js"></script>var canvas,context; function int(){ canvas=document.getElementById('canvas'); context=canvas.getContext('2d');5}图片加载 创建一个图片对象之后， 图片不能马上绘制到 canvas 上面，因为图片还没有加 载完成。
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 属性，定义线条的端点。
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
我们用的最基本的绘图环境在canvas中绘图，通过调用canvas对象的getContext()方法来获取绘图环境。
getContext()方法只需要一个参数：绘图环境的类型。
在游戏中，我们使用2D类型的绘图环境。
获取canvas绘图环境代码如下:<!--<!DOCTYPE> 声明必须是HTML 文档的第一行，位于<html> 标签之前。
--><!DOCTYPE html><html><head><meta http-equiv="Content-type" content="text/html; charset = utf-8"><title>HTML5</title><script type="text/javascript" charset = "utf-8">//这个函数将在页面完全加载后调用function pageLoaded(){//获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同var canvas = document.getElementById('tCanvas');//获取该canvas的2D绘图环境var context = canvas.getContext('2d');//绘制代码将出现在这里}</script></head><body onload="pageLoaded();"><canvas width = "400" height = "200" id = "tCanvas" style = "border:black 1px solid;"><!--如果浏览器不支持则显示如下字体-->提示：你的浏览器不支持<canvas>标签</canvas></body></html>更多信息请查看IT技术专栏。
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的对象。
如何使用JavaScript实现Canvas绘图和动画
如何使用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 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高级篇-canvas
• 参数：
– centerX, centerY：定义一个中心点。 – radius：半径。 – startingAngle, endingAngle：起始角度，结束 角度。 – antiClockwise：绘图方向，顺时针或逆时针。
实例：绘制曲线。
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = 288; Math.PI表示 var centerY = 160; 180度。 var radius = 75; var startingAngle = 1.1 * Math.PI; var endingAngle = 1.9 * Math.PI; var counterclockwise = false; context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise); context.lineWidth = 15; context.strokeStyle = "black"; // line color context.stroke();
练习：绘制如下图形。
实例：体会beginPath的作用。
脚本分析
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "#666"; function useBeginPath() { for (var i = 0; i < 5; ++i) { ctx.beginPath(); ctx.rect(10 + i*20, 10 + i*20, 210 - i*40, 210 - i*40); ctx.stroke(); } }
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教程
![[HTML5资料]Canvas教程](https://img.taocdn.com/s3/m/a4a5c8a4dd3383c4bb4cd2d4.png)
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分别路径绘制样式和绘制路径。
第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三种线 条端点属性值，然后使用循环访问数组元素，为每条直线添加不同端点。
canvas 用法
canvas 用法Canvas是HTML5新增的元素，它可以使用JavaScript 在Web页面上绘制和操作各种形状和图像。
Canvas提供了一种非常灵活的基于像素的绘图的方式，使开发者可以使用代码自由地进行绘画，而不必依赖于图片。
一、Canvas的基本用法Canvas元素是一个空容器，需要通过JavaScript获取一个2d绘图的上下文才能在上面绘画。
1. 获取Canvas对象获取Canvas对象的代码很简单:``` var canvas =document.getElementById('myCanvas'); ```2. 获取Canvas上下文获取Canvas上下文需要调用getContext()方法。
可以使用'2d'参数获得2d绘图的上下文:``` var ctx = canvas.getContext('2d'); ```二、Canvas 绘图操作1. 线段使用Canvas绘制线段可以调用线段的属性和方法，比如描边颜色、线宽、起始点和结束点。
具体绘画代码为: ``` var canvas =document.getElementById('myCanvas'); var ctx =ctx.moveTo(100, 100); // 起始点(x,y)ctx.lineTo(200, 200); // 结束点(x,y) ctx.lineWidth = 5; // 线宽 ctx.strokeStyle = "blue"; // 描边颜色 ctx.stroke(); ```2. 矩形使用Canvas绘制矩形可以调用矩形的属性和方法，比如填充颜色、描边颜色、线宽、起始点和结束点。
具体绘画代码为:``` var canvas =document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; // 填充颜色 ctx.fillRect(50, 50, 100, 100); // x位置，y位置，宽度，高度ctx.strokeStyle = 'red'; // 线条颜色 ctx.lineWidth = 3; // 线条宽度 ctx.strokeRect(50, 50, 100, 100); ```3. 弧使用Canvas绘制弧可以调用弧的属性和方法，比如起始角、结束角、半径等属性。
前端开发知识：如何使用Canvas来实现图形处理和动画效果
前端开发知识：如何使用Canvas来实现图形处理和动画效果Canvas是HTML5中的绘图API，它提供了一种在Web页面上绘制图形、创建动画和交互的强大工具。
Canvas的原理是基于像素的，也就是说，可以通过绘制像素点来创建各种不同形状的图形。
因此，使用Canvas可以实现许多高级和复杂的图形处理和动画效果。
本文将详细介绍Canvas的基础知识和一些实用技巧，以帮助您更好地在Web开发中使用Canvas来实现图形处理和动画效果。
一、Canvas的基础知识1.创建Canvas在HTML中使用Canvas标签来创建一个Canvas画布：``````在JavaScript中，可以使用```document.getElementId()```方法获取到创建的Canvas画布，例如：```let canvas = document.getElementById("myCanvas");```2.绘制图形Canvas提供了许多绘图API，可以在画布上绘制不同形状的图形，如矩形、圆形、直线等等。
绘制图形需要使用Canvas上下文（context），可以通过```canvas.getContext()```方法获取上下文对象。
例如：```let canvas = document.getElementById("myCanvas");let ctx = canvas.getContext("2d");```在获取到上下文对象后，就可以使用各种绘图API来绘制不同形状的图形。
例如，使用```rect()```方法绘制矩形：```ctx.beginPath();ctx.rect(20, 20, 100, 50);ctx.fillStyle = "red";ctx.fill();ctx.closePath();```使用```arc()```方法绘制圆形：```ctx.beginPath();ctx.arc(100, 75, 50, 0, 2 * Math.PI);ctx.fillStyle = "blue";ctx.fill();ctx.closePath();```使用```lineTo()```方法绘制直线：```ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(200, 100);ctx.stroke();ctx.closePath();```3.动画效果Canvas可以用来创建各种动画效果，通过修改画布中图形的位置、颜色等属性，来产生动态效果。
详解HTML5Canvas绘制时指定颜色与透明度的方法
详解HTML5Canvas绘制时指定颜⾊与透明度的⽅法指定颜⾊⿊⾊是Canvas绘制的默认⾊彩，要想换⼀种颜⾊的话，就得在实际画之前指定颜⾊。
JavaScript Code复制内容到剪贴板1. ctx.strokeStyle = color指定绘制线的颜⾊：JavaScript Code复制内容到剪贴板1. ctx.fillStyle = color指定填充的颜⾊：来看看实际的例⼦：JavaScriptJavaScript Code复制内容到剪贴板1. onload = function() {2. draw();3. };4. function draw() {5. var canvas = document.getElementById('c1');6. if ( ! canvas || ! canvas.getContext ) { return false; }7. var ctx = canvas.getContext('2d');8. ctx.beginPath();9. ctx.fillStyle = 'rgb(192, 80, 77)'; // 红10. ctx.arc(70, 45, 35, 0, Math.PI*2, false);11. ctx.fill();12. ctx.beginPath();13. ctx.fillStyle = 'rgb(155, 187, 89)'; // 绿14. ctx.arc(45, 95, 35, 0, Math.PI*2, false);15. ctx.fill();16. ctx.beginPath();17. ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫18. ctx.arc(95, 95, 35, 0, Math.PI*2, false);19. ctx.fill();20. }效果如下图：指定透明度和普通的CSS中⼀样，我们指定颜⾊的时候还可以带⼀个alpha值（不过⽤的不多，IE9之前都不⽀持）。
使用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绘制图片不显示的问题
HTML5Canvas绘制图⽚不显⽰的问题⼀、问题慕名赶来,却⼀脚踩空,低头⼀看,地上⼀个⼤坑。
事情是这样的,在我看完w3c的介绍和很有说服⼒和教学⼒的demo后,本着实践出真知的思想决定上⼿⼀试,这⼀试不要紧~我按照流⽔线⼯程铺设以下⼏点基本⼯作:1. canvas标签+id<div ><canvas id="myCanvas2" width="700" height="400" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas></div>2. getContext('2d')准备画布var c2 = document.getElementById("myCanvas2");var cxt2 = c2.getContext("2d");3. new⼀个Image()对象,并付给他的属性var img = new Image();img.src = "canvasTest1.jpg";4. 终于到了绘图。
兴冲冲的写下这段代码：cxt2.drawImage(img,30,20,640,360);流着哈喇⼦，我在浏览器按下了F5。
然后⼀⽚死寂...以为代码写错了，再回去仔细检查⼀遍，没错啊。
复制w3c的关键属性名及⽅法再检查⼀遍，确实没错啊。
图⽚打印出来，也有这个（⼈）图啊！后来观察w3c的案例，和我代码的区别就是他的图⽚是在html⾥边的。
然后我就学着向html⾥边插⼊了图⽚，<img src="./images/background.jpg" id="imgs" style="display:none"></img>并且⽤getElementById获取这个元素，var bgImg = document.getElementById('imgs')再次执⾏绘图竟然可以了。
Html5Canvas实现图片标记、缩放、移动和保存历史状态功能（附转换公式）
Html5Canvas实现图⽚标记、缩放、移动和保存历史状态功能（附转换公式）哈哈哈俺⼜来啦，这次带来的是canvas实现⼀些画布功能的⽂章，希望⼤家喜欢！前⾔因为也是⼤三了，最近俺也在找实习，之前有⼀个⾃⼰的⼩项⽬:⾯试官说可以往深层次思考⼀下，或许加⼀些新的功能来增加项⽬的难度，他提了⼏个建议，其中⼀个就是试卷在线批阅，⽼师可以在上⾯对作业进⾏批注，圈圈点点等俺当天晚上就开始研究这个东东哈哈哈，终于被我研究出来啦！采⽤的是canvas绘制画笔，由css3的transform属性来进⾏平移与缩放，之后再详细介绍介绍（希望⼤家可以留下宝贵的赞与star嘻嘻）效果预览动图是放cdn的，如果访问不了，可以登录在线尝试尝试:公式推导如果不想看公式如何推导，可以直接跳过看后⾯的具体实现~ 1. 坐标转换公式转换公式介绍其实⼀开始也是想在⽹上找⼀下有没有相关的资料，但是可惜找不到，所以就⾃⼰慢慢的推出来了。
我就举⼀下横坐标的例⼦吧！通⽤公式这个公式是表⽰，通过公式来将⿏标按下的坐标转换为画布中的相对坐标，这⼀点尤为重要(transformOrigin - downX) / scale * (scale-1) + downX - translateX = pointX参数解释transformOrigin: transform变化的基点（通过这个属性来控制元素以哪⾥进⾏变化）downX: ⿏标按下的坐标（注意，⽤的时候需要减去容器左偏移距离，因为我们要的是相对于容器的坐标）scale: 缩放倍数，默认为1translateX: 平移的距离推导过程这个公式的话，其实就⽐较通⽤，可以⽤在别的利⽤到transform属性的场景，⾄于怎么推导的话，我是⽤的笨办法具体的测试代码，放在⽂末，需要⾃取~1. 先做出两个相同的元素，然后标记上坐标，并且设置容器属性overflow:hidden来隐藏溢出内容ok，现在就有两个⼀样的矩阵啦，我们为他标记上⼀些红点，然后我们对左边的进⾏css3的样式变化transform矩形的宽⾼是360px * 360px的，我们定义⼀下他的变化属性，变化基点选择正中⼼，放⼤3倍// csstransform-origin: 180px 180px;transform: scale(3, 3);得到如下结果ok，我们现在对⽐⼀下上⾯的结果，就会发现，放⼤3倍的时候，恰好是中间⿊⾊⽅块占据了全部宽度。
基于HTML5 canvas 绘图技术研究
1概述W3C（万维网联盟）的HTML工作组终于在去年10月28日正式发布了HTML5的正式推荐标准（W3C Recommendation）。
相信在不久的将来，HTML5标准将会逐渐取代1999年制定的HTML?4.01和XHTML?1.0两个html标准，以符合当代的网络需求，为桌面平台和移动平台之间带来无缝衔接的丰富内容。
HTML5带来了一组新的用户体验，如Web的音频和视频不再需要插件，通过Canvas更灵活的完成图像绘制，而不必考虑屏幕的分辨率，浏览器对可扩展矢量图（SVG）和数学标记语言（MathML）的本地支持，通过引入新的注释信息以增强对东亚文字呈现（Ruby）的支持，对富Web应用信息无障碍新特性的支持，等等[1]。
Canvas元素最先由苹果公司的Safari浏览器引入，用于在Mac OS X WebKit中创建控制板部件（dashboard widget），在HTML5Canvas元素没有推出之前，web开发人员实现web绘图往往是通过SVG、VML等技术，但这些基于XML的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求，比如Web游戏所需要的像素级别的绘图能力。
HTML5提供了Canvas 标记元素来实现绘图功能。
该元素可以使用浏览器脚本语言（通常是JavaScript）调用Canvas自带的函数（即方法）进行图形绘制，和对图像的像素级操作。
相较于传统的在服务器端先画好图片，再把图片发到浏览器中，或用第三方插件显示的方式，它与浏览器渲染引擎结合紧密，节约了资源，并极大地简化了图形和网页中其他元素的交互过程[2]。
目前该元素已被加入HTML5标准的草案，并且得到了所有主流浏览器的支持。
本文详细介绍在可视化开发工具HBuilder 中利用HTML5Canvas元素实现绘制基本图形方法和步骤。
2可视化开发工具HBuilder介绍目前主流的前端编码工具有windows记事本为代表的文本编辑器，以及Webstorm、Brackets、Dreamweaver、Microsoft Visual Studio 2008/2012等IDE（集成开发环境）。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML5 Canvas绘图基础什么是 Canvas？HTML5 Canvas 是一个极其有用的绘制和动画元素。
Canvas 使用JavaScript 直接在页面上绘制图形。
Canvas能够定义和控制矩形区域，并允许以动态方式或通过脚本呈现2D形状和位图。
对于生成能够增强UI、图表、相册、图形、动画和嵌入式绘制应用程序的出色视觉材料而言，HTML5 Canvas非常完美。
Canvas元素可以通过几种方法来绘制路径、矩形、圆形和字符。
Canvas 坐标在画布上进行绘制的前提条件是熟悉网格和坐标空间。
空间区域的长度和宽度的单位为像素。
用户可以围绕x和y坐标构建画布。
当坐标为x=0, y=0时，画布位于左上角。
矩形画布区域的默认宽度为300像素，高度为150像素，但您可以通过修改这两个属性来获得所需的画布大小。
图 1 显示了如何实现x和y坐标。
图 1. 画布坐标图 1 显示了长宽都为 100 像素的画布区域：∙左上角的坐标为x=0, y=0。
∙x值在水平方向增加，而y值在垂直方向增加。
∙右下角的坐标为x=100, y=100。
∙中心点的坐标为x=50, y=50。
开始在向画布添加内容之前，必须先在HTML文件中定义画布，因此必须创建JavaScript代码，用它来访问<canvas>标记并与HTML5 Canvas API通信，这样就可以绘制图形。
<canvas>标记的基本结构为：<canvas id="myCanvas" width="200" height="200"></canvas>canvas元素有两个专有的属性：width和height。
此外，Canvas还拥有所有关键的HTML5属性，比如class、id和name。
在上面显示的代码中就用到了id属性。
JavaScript使用这里创建的画布id来识别要绘制内容的画布。
JavaScript使用document.getElementById()方法来确定正确的画布，如下所示：var canvas = document.getElementById("myCanvas");每个画布都必须有一个上下文定义，如下所示。
到目前为止，官方的规范仅识别 2D 环境：var context = canvas.getContext("2d");在识别画布并指定其上下文之后，就可以在其上绘制内容了。
绘制工具、效果和变形这里讨论 HTML5 Canvas 将用到的各种绘制工具、效果和变形。
这些绘制工具包括：∙线条∙矩形∙弧形∙贝塞尔曲线和二次方曲线∙圆形和半圆形将使用的画布效果包括：∙填充和笔触∙线性渐变和辐射渐变要讨论的变形包括：∙缩放∙旋转∙转换绘制线条要在画布上绘制线条，可以使用moveTo()、lineTo()和stroke()方法。
此外，还可以使用beginPath()方法来重新设置当前的路径：∙context.beginPath();∙Context.moveTo(x,y);∙Context.lineTo(x,y);∙Context.stroke(x,y);beginPath()方法将启用一个新路径。
在使用不同的子路径绘制新的线条之前，必须使用beginPath()来表明绘制的新起点。
首次绘制线条时没有必要调用beginPath()方法。
moveTo()方法会声明新的子路径的开始点。
lineTo()方法用于创建子路径。
可以通过lineWidth和strokeStyle改变线条的外观。
lineWidth元素用于改变线条的粗细，而strokeStyle则用于改变线条的颜色。
在图 2 中，分别绘制了蓝色、绿色和紫色的线条。
图 2. 画布中有 3 条颜色不同的线条图 2 中的线条是通过清单 1 中的代码创建的。
蓝色的线条两端是圆角的，创建它的时候首先要确定一个新路径即将开始：context.beginPath()。
其创建过程如下所示：∙context.moveTo(50, 50)，将路径的开始点置于(x=50, y=50)∙context.lineTo(300,50)，识别线条的结束点∙context.lineWidth = 10，线条的宽度∙context.strokeStyle = "#0000FF"，线条的颜色∙context.lineCap = "round"，使线条的两端变圆∙context.stroke()，真实地将线条绘制在画布上上面的 3 个线条的长度都是 50 像素，但它们看起来不一样长，这是由线条末端套盖 (cap) 引起的视觉混淆。
有 3 种可用的末端套盖：∙Context.round（蓝色）∙Context.square（绿色）∙Context.butt（紫色，即默认颜色）butt 套盖是默认值。
使用 round 或 square 套盖样式时，线条的长度将增加，增加的量为线条自身的宽度。
例如，如果长度为200 像素、宽度为 10 像素的线条采用 round 或 square 套盖样式，那么将导致线条的长度变为 210 像素，因为将在线条的两端各增加一个长度为 5 像素的套盖。
如果长度为 200 像素、宽度为 20 像素的线条采用 round 或 square 套盖样式，那么将导致线条的长度变为 220 像素，因为将在线条的两端各增加一个长度为 10 像素的套盖。
运行并修改清单 1 的代码，以便更充分地了解如何绘制线条。
清单 1. 在画布上创建 3 个颜色不同的线条<!DOCTYPE HTML><html><head><title>Line Example</title><style>body {margin: 0px;padding: 0px;}#myCanvas {border: 1px solid #9C9898;}</style><script>window.onload = function() {var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");// blue line with round endscontext.beginPath();context.moveTo(50, 50);context.lineTo(300,50);context.lineWidth = 10;context.strokeStyle = "#0000FF";context.lineCap = "round";context.stroke();// green line with square endscontext.beginPath();context.moveTo(50, 100);context.lineTo(300,100);context.lineWidth = 20;context.strokeStyle = "#00FF00";context.lineCap = "square";context.stroke();// purple line with butt endscontext.beginPath();context.moveTo(50, 150);context.lineTo(300, 150);context.lineWidth = 30;context.strokeStyle = "#FF00FF";context.lineCap = "butt";context.stroke();};</script></head><body><canvas id="myCanvas" width="400" height="200"></canvas></body></html>绘制矩形在画布上绘制矩形区域有 3 种方法：∙fillRect(x,y,width,height)，绘制已填充的矩形∙strokeRect(x,y,width,height)，绘制矩形框线∙clearRect(x,y,width,height)，擦除矩形的给定区域使之完全透明对于这 3 种方法而言，x和y表示矩形在画布上相对于左上角的位置（x=0, y=0），而width和height分别是矩形的宽度和高度。
图 3 显示了由清单 2 中的代码创建的 3 个矩形区域。
图 3. 矩形画布fillRect()方法创建了一个矩形并使用默认的黑色填充它。
clearRect()方法在第一个矩形的中心擦除一块矩形区域，该区域位于fillRect()方法所创建的矩形的中心。
strokeRect方法创建一个仅黑色边框可见的矩形。
清单 2. 矩形画布代码<!DOCTYPE HTML><html><head><title>Rectangle Example</title><style>body {margin: 0px;padding: 0px;}#myCanvas {border: 1px solid #000000;background-color: #ffff00;}</style><script type="text/javascript">function drawShape(){var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');context.fillRect(25,25,50,50);context.clearRect(35,35,30,30);context.strokeRect(100,100,50,50);}</script></head><body onload="drawShape();"><canvas id="myCanvas" width="200" height="200"></canvas></body></html>绘制弧形、曲线、圆形和半圆形绘制圆形和半圆形都使用arc()方法。