使用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页⾯的基本代码模板。
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做地图
3
event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
4
if(event.wheelDelta>0){
5 6 7 8 9 10 11 12 13 14 }
imgScale*=2; imgX=imgX*2-pos.x; imgY=imgY*2-pos.y; }else{ imgScale/=2; imgX=imgX*0.5+pos.x*0.5; imgY=imgY*0.5+pos.y*0.5; } drawImage();
18
<script type="text/javascript" src="main.js"></script>
19
</body>
20 </html>
1 var canvas,context;
2 function int(){
3
canvas=document.getElementById('canvas');
61 function windowToCanvas(canvas,x,y){
62
var bbox = canvas.getBoundingClientRect();
63
return {
64
x:x - bbox.left - (bbox.width - canvas.width) / 2,
65
y:y - bbox.top - (bbox.height - canvas.height) / 2
21
var bbox = canvas.getBoundingClientRect();
基于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（集成开发环境）。
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分别路径绘制样式和绘制路径。
火龙果-html_5_canvas绘图
火龙果整理
火龙果整理
fillStyle 、 strokeStyle、clearRect 和 lineWidth 属性
其中， fillStyle 、 strokeStyle、clearRect 参 数：（x, y, width, height ）
火龙果整理
火龙果整理
在 canvas 中绘制”hello world” 文字 ：
火龙果整理
阴影 （目前只有 Konqueror 和 Firefox 3.1 nightly build 支 持Color：阴影颜色。其值和 CSS 颜色 值一致。 shadowBlur：设置阴影模糊程度。此值越大， 阴影越模糊。其效果和 Photoshop 的高斯模 糊滤镜相同。 shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量，单位是像素。
火龙果整理
fillText 和 strokeText 有两个方法可以绘制文字： fillText 和 strokeText。第一个绘制带 fillStyle 填充 的文字，后者绘制只有 strokeStyle 边框 的文字。两者的参数相同：要绘制的文字 和文字的位置(x,y) 坐标。还有一个可选选 项——最大宽度。如果需要的话，浏览器 会缩减文字以让它适应指定宽度。文字对 齐属性影响文字与设置的(x,y) 坐标的相对 位置。
火龙果整理
火龙果整理
插入图像 drawImage 方法允许在 canvas 中插入其他图像。在 Opera 中可以在 canvas 中绘制 SVG 图形。此方法比较 复杂，可以有3个、5个或9个参数：
3个参数：最基本的 drawImage 使用方法。一个参数 指定图像位置，另两个参数设置图像在 canvas中的位 置。 5个参数：中级的 drawImage 使用方法，包括上面所 述3个参数，加两个参数指明插入图像宽度和高度 (如 果你想改变图像大小)。 9个参数：最复杂drawImage 杂使用方法，包含上述5 个参数外，另外4个参数设置源图像中的位置和高度 宽度。这些参数允许你在显示图像前动态裁剪源图像。
使用HTML5 Canvas实现画图效果
功能很简单，原理其实和拖放是类似的，主要是三个事件：在canvas 上绑定mousedown 事件以标志绘画的开始（调用moveTo 移动画笔）在document 上绑定mousemove 事件来处理绘画时的行为（调用lineTo 以及stroke 进行绘画）在document 上绑定mouseup 事件以标志绘画的结束（解绑document 上的两个事件）发布于2011-07-16 分类：html实现HTML5足够强大实现很多功能，画一个时钟只是一个小玩意。
图片指针用ctx的drawImage可以实现。
至于兼容性问题，网上的解决方案已经很多了。
这个东东是用来玩的，不是用来做应用的，学习下canvas API。
发布于2011-07-06 分类：html“DIV+CSS”这个词汇不知道害了多少人，也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。
这样做，对于视觉上并没有什么影响，因为还原了之前设计的页面效果图，但如果这种HTML文档交给机器（例如蜘蛛）去分析，它可能根本找不到重点，你整个页面对它来说，就如同一个白蚁窝。
发布于2011-06-18 分类：html先说明，如果你的浏览器不支持HTML5，那么就无法看到这个游戏。
所以请使用Firefox、Chrome等浏览器看本页。
该游戏支持ff,chrome,ie9,safari。
ie6,7,8就不支持了，你懂，其余的没测试过，理论上支持html5的浏览器都能用。
每种塔都可以升级到3级，升级的价格与本身建造相同，卖掉的话就是总额的一半。
发布于2011-06-17 分类：htmlml代码如果你是一个使用div标签做任何事的家伙，那么这篇文章将对你十分有益。
该问重点讲述了如何通过使用富有语义的标签和最少的div标记来编写干净的html代码。
你是否曾经也试图去修改别人的一些html模板，那么你一定会被代码里那些肮脏的标签所抓狂。
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脚本来绘制图形和文本。
HTML5游戏开发与Canvas图形绘制教程
HTML5游戏开发与Canvas图形绘制教程章节一：HTML5游戏开发的基础概念HTML5游戏开发是指利用HTML5技术和相关Web API开发游戏应用的过程。
HTML5游戏的特点包括跨平台、无需安装、即时更新等。
在开发HTML5游戏之前，我们需要了解一些基础概念：1.1 HTML5和CanvasHTML5是一种用于构建和呈现Web内容的标准。
Canvas是HTML5提供的一个图形绘制元素，允许我们通过JavaScript代码在其中实时绘制图形。
1.2 游戏引擎游戏引擎是游戏开发的核心工具。
它提供了游戏开发所需的一些基础功能，如图形渲染、物理模拟、碰撞检测等。
目前比较流行的HTML游戏引擎包括Phaser、Cocos2d-js等。
1.3 JavaScriptJavaScript是一种用于Web应用程序开发的脚本语言。
在HTML5游戏开发中，我们通常使用JavaScript来实现游戏的逻辑控制和交互功能。
章节二：Canvas图形绘制基础Canvas提供了丰富的图形绘制API，我们可以通过JavaScript代码在Canvas上绘制各种形状、图像和动画。
2.1 获取Canvas元素在HTML文档中，我们可以通过标签或JavaScript代码获取到Canvas元素。
例如：```html<canvas id="myCanvas" width="800" height="600"></canvas>``````javascriptvar canvas = document.getElementById("myCanvas");```2.2 绘制基本形状Canvas提供了绘制线条、矩形、圆形等基本形状的方法。
例如，我们可以使用以下代码绘制一个红色的矩形：```javascriptvar ctx = canvas.getContext("2d");ctx.fillStyle = "red";ctx.fillRect(50, 50, 200, 100);```2.3 绘制图像我们可以通过Image对象加载图片，并使用Canvas的drawImage方法绘制图像。
详解HTML5canvas绘图基本使用方法
详解HTML5canvas绘图基本使⽤⽅法<canvas></canvas>是HTML5中新增的标签，⽤于绘制图形，实际上，这个标签和其他的标签⼀样，其特殊之处在于该标签可以获取⼀个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进⾏绘图。
<canvas></canvas>只是⼀个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。
在<canvas>>元素上绘图主要有三步：1. 获取<canvas>元素对应的DOM对象，这是⼀个Canvas对象；2. 调⽤Canvas对象的getContext()⽅法，得到⼀个CanvasRenderingContext2D对象；3. 调⽤CanvasRenderingContext2D对象进⾏绘图。
绘制线段moveTo()和lineTo()以下是⼀个简单的<canvas>绘图⽰例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>canvas绘图演⽰</title><style type="text/css">#canvas{border: 1px solid #ADACB0;display: block;margin: 20px auto;}</style></head><body><canvas id="canvas" width="300" height="300">你的浏览器还不⽀持canvas</canvas></body><script type="text/javascript">var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");//设置对象起始点和终点context.moveTo(10,10);context.lineTo(200,200);//设置样式context.lineWidth = 2;context.strokeStyle = "#F5270B";//绘制context.stroke();</script></html>如果没有通过moveTo()特别指定，lineTo()的起始点是以上⼀个点为准。
Html5canvas画趋势图、柱状图
Html5canvas画趋势图、柱状图Html5 canvas画趋势图、柱状图首先，请确保你调试程序使用的浏览器支持html5。
（火狐、google chrome、ie9）然后，选择一个认识html5标签的开发环境，我使用的是vs2010。
要让VS2010识别html5页面很简单，首先安装vs2010旗舰版，然后，升级到vs2010sp1，然后打开编程环境，在“工具”—“选项”—“文本编辑器”—“HTML”—“验证”—“目标”下拉列表中选“Html5”即可。
值得一提的是，VS2010对javascript的联想能力比以前的版本要好得多。
下面进入主题，怎样在客户端绘制图像。
本人已经将经常用到的方法写到一个js文件中，下面直接贴上js代码，读者可以把以下代码直接复制到一个js文件中即可，后面是对函数的说明：Js代码：function DrawTrend(canvas,title,titlefont, left, right, top, bottom, data, ySegment, sXaxis, sYaxis, axisFont, color, xSegment) {var height = Number($(canvas).attr('height'));var width = Number($(canvas).attr('width'));var cxt = canvas.getContext("2d");cxt.fillStyle = "#f0f0f0";cxt.clearRect(0, 0, width, height);if (data == null || data.length < 1) {DrawString(cxt, "无数据", titlefont, "#000000", "center", "middle", width / 2, height / 2);}else {DrawLine(cxt, left, height - bottom, left, top, "");DrawLine(cxt, left, height - bottom, width - right, height -bottom, "");DrawString(cxt, title, titlefont, "#000000", "center", "middle", width / 2, top / 2);var stime = "";var subx = 0;var i = 0;var tempdata = new Array();for (i = 0; i < data.length; i++) {tempdata[i] = data[i][1];}var Yaxis = GetYaxis(tempdata, ySegment);var yinterval = (Yaxis[0] - Yaxis[1]) / ySegment;//画纵轴间隔线var suby = 0;for (i = 1; i <= ySegment; i++) {suby = height - bottom - (height - (bottom + top)) * i / ySegment; //副横轴纵坐标DrawString(cxt, String(Yaxis[1] + i * yinterval), axisFont, "", "right", "middle", left - 3, suby);DrawLine(cxt, left, suby, width - right, suby, "#aaaaaa");}DrawString(cxt, String(Yaxis[1]), axisFont, "", "right", "middle", left - 3, height - bottom); //起始纵坐标DrawString(cxt, sYaxis, axisFont, "", "center", "bottom", left, top - 10); //纵坐标单位DrawString(cxt, sXaxis, "", "", "right", "bottom", width - 3, height - bottom); //横坐标单位if (xSegment != null) {//找出横轴间隔点时间(分段)var n = data.length / xSegment;var xinter = (width - (left + right)) / xSegment;//画横轴间隔线for (i = 1; i <= xSegment; i++) {subx = left + xinter * i; //副横轴坐标stime = String(data[parseInt(n * i) - 1][0]);DrawString(cxt, stime, axisFont, "", "center", "top", subx, height - bottom + 3);DrawLine(cxt, subx, top, subx, height - bottom, "#aaaaaa");}//通过数值计算点坐标xinter = (width - (left + right)) / (data.length - 1); //横轴间隔像素数var points = new Array();for (i = 0; i < data.length; i++) {points[i] = new Array();points[i][0] = left + i * xinter;points[i][1] = height - bottom - (height - (bottom + top)) * (data[i][1] - Yaxis[1]) / (Yaxis[0] - Yaxis[1]);}}else {//通过数值计算点坐标xinter = (width - (left + right)) / (data.length - 1); //横轴间隔像素数var points = new Array();//计算x轴刻度间隔var xsegment = 1;if (data.length > 9) {for (i = 9; i > 1; i--) {if (data.length % i < 2) {xsegment = parseInt(data.length / i);break;}}}for (i = 0; i < data.length; i++) {points[i] = new Array();points[i][0] = left + i * xinter;points[i][1] = height - bottom - (height - (bottom + top)) * (data[i][1] - Yaxis[1]) / (Yaxis[0] - Yaxis[1]);if (i % xsegment == 0 && i != 0) {//横轴坐标时间var stime = data[i][0];DrawString(cxt, stime, axisFont, "", "center", "top", left + i * xinter, height - bottom + 3);DrawLine(cxt, left + i * xinter, top, left + i * xinter, height - bottom, "#aaaaaa");}}}DrawLines(cxt, points, color);}}参数说明：canvas：画布对象，必须用document.getElementById("");title：标题titlefont：标题字体，例如："18px 微软雅黑"，left, right, top, bottom：坐标轴左右上下边距data：数据，二维数组，其中data[i][1]必须为number类型，可以使用Number()函数将其他类型转换为数值类型ySegment：Y轴分段数量sXaxis：横轴标签sYaxis：纵轴标签axisFont：坐标轴字体color：曲线颜色xSegment：X轴分段数量，可选，如果设置了，则X轴分段数量为设置值，否则根据数据的长度自动分段function DrawColumnChart(canvas, title, titlefont, left, right, top, bottom, data,showdata, ySegment, sXaxis, sYaxis, axisFont, color,colordark) {var height = Number($(canvas).attr('height'));var width = Number($(canvas).attr('width'));var cxt = canvas.getContext("2d");cxt.fillStyle = "#f0f0f0";cxt.clearRect(0, 0, width, height);if (data == null || data.length == 0) {DrawString(cxt, "无数据", titlefont, "#000000", "center", "middle", width / 2, height / 2);}else {DrawLine(cxt, left, height - bottom, left, top, "");DrawLine(cxt, left, height - bottom, width - right, height - bottom, "");DrawString(cxt, title, titlefont, "#000000", "center", "middle", width / 2, top / 2);var i = 0;var tempdata = new Array();for (i = 0; i < data.length; i++) {tempdata[i] = data[i][1];}var Yaxis = GetYaxis(tempdata, ySegment);var yinterval = (Yaxis[0] - Yaxis[1]) / ySegment;//画纵轴间隔线var suby = 0;for (i = 1; i <= ySegment; i++) {suby = height - bottom - (height - (bottom + top)) * i / ySegment; //副横轴纵坐标DrawString(cxt, String(Yaxis[1] + i * yinterval), axisFont, "", "right", "middle", left - 3, suby);DrawLine(cxt, left, suby, width - right, suby, "#aaaaaa");}DrawString(cxt, String(Yaxis[1]), axisFont, "", "right", "middle", left - 3, height - bottom); //起始纵坐标DrawString(cxt, sYaxis, axisFont, "", "center", "bottom", left, top - 10); //纵坐标单位var xinter = (width - (left + right)) / (3 * data.length + 1); //横轴间隔的宽度(像素数)var points = new Array();//计算x轴刻度间隔var xsegment = 1;if (data.length > 10) {for (i = 10; i > 1; i--) {if (data.length % i < 2) {xsegment = parseInt(data.length / i);break;}}}for (i = 0; i < data.length; i++) {points[i] = new Array();points[i][0] = left + (i * 3 + 1) * xinter;var colheight = (height - (top + bottom)) * (data[i][1] - Yaxis[1]) / (Yaxis[0] - Yaxis[1]);points[i][1] = height - bottom - colheight;//画柱状图if (colordark == null) {FillRect(cxt, points[i][0], points[i][1], xinter * 2, colheight, color);}else {var colors = new Array();colors[0] = new Array();colors[0][0] = 0;colors[0][1] = colordark;colors[1] = new Array();colors[1][0] = 0.4;colors[1][1] = color;colors[2] = new Array();colors[2][0] = 1;colors[2][1] = colordark;FillLinearRect(cxt, points[i][0], points[i][1], xinter * 2, colheight, colors);}DrawRect(cxt, points[i][0], points[i][1], xinter * 2, colheight, "#000000");if (i % xsegment == 0) {//横轴坐标时间var stime = data[i][0];DrawString(cxt, stime, axisFont, "", "center", "top", left + (i *3 + 2) * xinter, height - bottom + 3);if (showdata) {//显示数字DrawString(cxt, data[i][1], axisFont, "", "center", "bottom", left + (i * 3 + 2) * xinter, points[i][1] - 1);}}DrawString(cxt, sXaxis, "", "", "right", "bottom", width - 3, height - bottom);}}}参数说明：canvas：画布对象，必须用document.getElementById("");title：标题titlefont：标题字体，例如："18px 微软雅黑"，left, right, top, bottom：坐标轴左右上下边距data：数据，二维数组，其中data[i][1]必须为number类型，可以使用Number()函数将其他类型转换为数值类型showdata：bool类型，表示是否在柱状图的顶部显示数值ySegment：Y轴分段数量sXaxis：横轴标签sYaxis：纵轴标签axisFont：坐标轴字体color：曲线颜色colordark：暗色，可选，如果设置了，柱状图显示为线性渐变色（从左到右：0：colordark，0.4：color，1：colordark），否则显示为单色，function FillRect(cxt, x1, y1, width, height, color) {cxt.fillStyle = color;cxt.fillRect(x1, y1, width, height);}参数说明：cxt：画笔，var cxt = canvas.getContext("2d"); 得到x1, y1：矩形左上角坐标width, height：矩形宽高color：矩形颜色function DrawRect(cxt, x1, y1, width, height, color){cxt.strokeStyle = color;cxt.beginPath();cxt.moveTo(x1, y1);cxt.lineTo(x1+width, y1);cxt.lineTo(x1+width, y1+height);cxt.lineTo(x1, y1+height);cxt.lineTo(x1, y1);cxt.stroke();}参数同上function FillLinearRect(cxt, x1, y1, width, height, colors) { var grd = cxt.createLinearGradient(x1, y1,x1+ width, y1); for (var i = 0; i < colors.length; i++) {grd.addColorStop(colors[i][0], colors[i][1]);}cxt.fillStyle = grd;cxt.fillRect(x1, y1, width, height);}参数说明：cxt：画笔，var cxt = canvas.getContext("2d"); 得到x1, y1：矩形左上角坐标width, height：矩形宽高colors：渐变色数组，colors[i][0]颜色驻点，colors[i][1]颜色值"#FF0000"function DrawLine(cxt, x1, y1, x2, y2, color) { if (color == "") {cxt.strokeStyle = "#000000";}else {cxt.strokeStyle = color;}cxt.beginPath();cxt.moveTo(x1, y1);cxt.lineTo(x2, y2);cxt.stroke();}function DrawLines(cxt, points, color) {if (color == "") {cxt.strokeStyle = "#000000";}else {cxt.strokeStyle = color;}if (points.length > 0) {cxt.beginPath();var point = new Array();point = points[0];cxt.moveTo(point[0], point[1]);for (var i = 1; i < points.length; i++) {point = points[i];cxt.lineTo(point[0], point[1]);}cxt.stroke();}参数说明：points：二维数组，points[i][0]X坐标,points[i][1]y 坐标function DrawString(cxt, text, font, color, align, v_align, x, y) { if (font == "") {cxt.font = "12px 微软雅黑";}else {cxt.font = font;}if (color == "") {cxt.fillStyle = "#000000";}else {cxt.fillStyle = color;}if (align == "") {cxt.textAlign = "left";}else {cxt.textAlign = align;}if (v_align == "") {cxt.textBaseline = "top";}else {cxt.textBaseline = v_align;}cxt.fillText(text, x, y);参数说明：font：字体，如："18px 微软雅黑"，align：横向对齐：'left','center','right'v_align：纵向对齐：'top','middle','bottom'// 根据一组数据，计算画曲线图需要的纵坐标最大最小值（尚需改进）function GetYaxis(data, inter) {var dataret = new Array();if (data.Length < 2) return null;var mindata = Min(data);var maxdata = Max(data);var interval = 0;if (maxdata > 0 && mindata >= 0) {interval = maxdata / inter;}else if (maxdata > 0 && mindata < 0) {interval = (maxdata - mindata) / inter;}else if (maxdata <= 0 && mindata < 0) {interval = Math.abs(mindata) / inter;}if (interval > 1) {var v = String(parseInt(interval)).length - 1; //*10的指数var yaxis = 0;if (maxdata > 0 && mindata >= 0) {var i = parseInt(Math.ceil(maxdata));while (true) {if (i % inter == 0 && i % Math.pow(10, v) == 0) {yaxis = i;break;i++;}dataret[0] = yaxis;dataret[1] = 0;}else if (maxdata > 0 && mindata < 0) {var i = parseInt(Math.ceil(maxdata));while (true) {if (i % inter == 0 && i % Math.pow(10, v) == 0) {var k = MinGongBeiShu(inter, parseInt(Math.pow(10, v))); //间隔数inter和10*n的最小公倍数yaxis = i + k;break;}i++;}var iinter = yaxis / inter;var n_max = parseInt(Math.ceil(maxdata / iinter));dataret[0] = n_max * iinter;dataret[1] = (n_max - inter) * iinter;}else if (maxdata <= 0 && mindata < 0) {maxdata = Math.abs(maxdata);mindata = Math.abs(mindata);var i = parseInt(Math.ceil(mindata));while (true) {if (i % inter == 0 && i % Math.pow(10, v) == 0) {yaxis = i;break;i++;}dataret[0] = 0;dataret[1] = -1 * yaxis;}}else if (interval > 0.1)//小于1大于0.1，先将max和min扩大10倍，再除以10{var mindata1 = mindata * 10;var maxdata1 = maxdata * 10;var interval1 = interval * 10;var v = String(parseInt(interval1)).length - 1; //*10的指数var yaxis = 0;if (maxdata1 > 0 && mindata1 >= 0) {var i = parseInt(Math.ceil(maxdata1));while (true) {if (i % inter == 0 && i % Math.pow(10, v) == 0) {yaxis = i;break;}i++;}dataret[0] = yaxis * 0.1;dataret[1] = 0;}else if (maxdata1 > 0 && mindata1 < 0) {var i = parseInt(Math.ceil(maxdata1));while (true) {if (i % inter == 0 && i % Math.pow(10, v) == 0) {var k = MinGongBeiShu(inter, parseInt(Math.pow(10, v))); //4和10*n的最小公倍数yaxis = i + k;break;}i++;}var iinter = yaxis / inter;var n_max = parseInt(Math.ceil(maxdata1 / iinter));dataret[0] = n_max * iinter * 0.1;dataret[1] = (n_max - inter) * iinter * 0.1;}else if (maxdata1 <= 0 && mindata1 < 0) {maxdata = Math.abs(maxdata1);mindata = Math.abs(mindata1);var i = parseInt(Math.ceil(maxdata1));while (true) {if (i % inter == 0 && i % Math.pow(10, v) == 0) {yaxis = i;break;}i++;}dataret[0] = 0;dataret[1] = -0.1 * yaxis;}}else {//如果数据过小，则用其上下整数限制dataret[0] = Math.ceil(maxdata);dataret[1] = Math.floor(mindata);if (maxdata == mindata && maxdata == 0) {dataret[0] = 1;dataret[1] = 0;}else if (maxdata == mindata && maxdata > 0) {dataret[0] = maxdata;dataret[1] = 0;}else if (maxdata == mindata && maxdata < 0) {dataret[0] = 0;dataret[1] = mindata;}}return dataret;}参数说明：data：一维数组inter：纵轴间隔段数下面介绍怎样使用上面的方法。
canvas 高级用法
canvas 高级用法Canvas是HTML5中的一个绘图API，它提供了丰富的功能用于在网页上绘制2D图形。
除了基本的绘制图形和渲染文本之外，Canvas还有一些高级用法，如下：1.图片处理：Canvas提供了多种方法用于加载、显示和处理图像。
可以使用drawImage()方法将图像绘制到Canvas上，并可以应用变换、裁剪等操作来对图像进行处理。
2.图形变换：Canvas支持多种图形变换操作，如旋转、缩放、平移和倾斜等。
可以使用transform()和setTransform()方法进行变换，并可以使用save()和restore()方法保存和恢复转换状态。
3.绘制路径：Canvas提供了一些方法用于绘制复杂的路径，如moveTo()、lineTo()、arc()、quadraticCurveTo()等。
可以使用这些方法创建任意形状的路径，并可以使用fill()和stroke()方法来填充或描边路径。
4.渐变和阴影效果：Canvas支持线性渐变、径向渐变和阴影效果的绘制。
可以使用createLinearGradient()和createRadialGradient()方法创建渐变对象，并可以使用createShadow()方法创建阴影效果。
5.像素操作：Canvas提供了一些方法用于对像素进行操作，如getImageData()、putImageData()、createImageData()等。
可以使用这些方法读取和修改Canvas上的像素数据，从而实现像素级的图像处理。
6.动画效果：Canvas可以实现简单的动画效果，可以使用requestAnimationFrame()方法在页面中创建动画循环，并使用clearRect()方法清除Canvas上的内容，再重新绘制新的帧。
此外，还有一些拓展用法可供进一步探索：7. WebGL：Canvas的一个扩展是WebGL，它是基于OpenGL ES的一个3D绘图API。
使用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]。
H5的canvas绘图技术
H5的canvas绘图技术canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。
Canvas元素就像一块画布，通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果。
1.1 浏览器不兼容问题•ie9以上才支持canvas, 其他chrome、firefox、苹果浏览器等都支持•只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)•移动端的兼容情况非常理想，基本上随便使用• 2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持•如果浏览器不兼容，最好进行友好提示，提示内容只有在浏览器不支持时才显示。
//例如：<canvas id="cavsElem">你的浏览器不支持canvas，请升级浏览器</canvas>浏览器不兼容，也可以使用flash等手段进行优雅降级1.2 创建画布在页面中创建canvas元素与创建其他元素一样，只需要添加一个<canvas>标记即可。
该元素默认的宽高为300*15，可以通过元素的width属性和height属性改变默认的宽高。
注意：•不能使用CSS样式控制canvas元素的宽高，否则会导致绘制的图形拉伸。
•重新设置canvas标签的宽高属性会导致画布擦除所有的内容。
•可以给canvas画布设置背景色1.3 canvas坐标系在开始绘制任何图像之前，我们先讲一下canvas的坐标系。
canvas坐标系是以左上角0,0处为坐标原点，水平方向为x轴，向右为正；垂直方向为y轴，向下为正。
如下图所示：1.4 绘制线径1.获取上下文对象(CanvasRenderingContext2D)首先，获取canvas元素，然后调用元素的getContext(“2d”)方法，该方法返回一个CanvasRenderingContext2D对象，使用该对象就可以在画布上绘图了。
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坐标、圆的半径、起始角度和结束角度。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
使用 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 上面，因为图片还没有加 载完成。
所以我们需要监听图片对象加载完事件，然后再去绘制。
1 2 3 4 5 6 7 8 9 10 var img,//图片对象 imgIsLoaded//图片是否加载完成; function loadImg(){ img=new Image(); img.onload=function(){ imgIsLoaded=true; //draw image } img.src="map.jpg"; }图片绘制 绘制图像一个函数就可以搞定，但是需要记录这个图像的左上角坐标以及缩 放比例。
1 var imgX,imgY,imgScale; 2 function drawImage(){ 3 context.clearRect(0,0,canvas.width,canvas.height); 4 context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale 5} 图片平移 html5 事件最小细度在 DOM 上，所以我们无法对 canvas 上的图像做监听， 只能对 canvas 监听。
1. 首先监听鼠标 mousedown 事件，等事件发生之后，再监听鼠标 mousemove 事件和 mouseup 事件2. mousemove 事件发生之后，获得鼠标移动的位移，相应的图片的位置改变多 少 3. mouseup 事件发生之后，取消对 mousemove 以及 mouseup 事件监听 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 canvas.onmousedown=function(event){ var pos=windowToCanvas(canvas,event.clientX,event.clientY); canvas.onmousemove=function(event){ canvas.style.cursor="move"; var pos1=windowToCanvas(canvas,event.clientX,event.clientY); var x=pos1.x-pos.x; var y=pos1.y-pos.y; pos=pos1; imgX+=x; imgY+=y; drawImage(); } canvas.onmouseup=function(){ canvas.onmousemove=null; canvas.onmouseup=null; canvas.style.cursor="default"; } } function windowToCanvas(canvas,x,y){ var bbox = canvas.getBoundingClientRect(); return { x:x - bbox.left - (bbox.width - canvas.width) / 2, y:y - bbox.top - (bbox.height - canvas.height) / 2 };}图片缩放 其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。
如 果数学几何不好，计算公式就可能看不明白了。
1 canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox 浏览器兼容 2 var pos=windowToCanvas(canvas,event.clientX,event.clientY); 3 event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40)); 4 if(event.wheelDelta>0){5 6 7 8 9 10 11 12 13 14 }imgScale*=2; imgX=imgX*2-pos.x; imgY=imgY*2-pos.y; }else{ imgScale/=2; imgX=imgX*0.5+pos.x*0.5; imgY=imgY*0.5+pos.y*0.5; } drawImage();这个时候，基本功能就实现了，加载一张图片和加载多张图片都差不多，维 护每一张图片的位置和大小，下面来整理一下代码吧。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 var var canvas,context; img,//图片对象 imgIsLoaded,//图片是否加载完成; imgX=0, imgY=0, imgScale=1;(function int(){ canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); loadImg(); })(); function loadImg(){ img=new Image(); img.onload=function(){ imgIsLoaded=true; drawImage(); } img.src="map.jpg";} functiondrawImage(){ context.clearRect(0,0,canvas.width,canvas.height); context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScal} canvas.onmousedown=function(event){ var pos=windowToCanvas(canvas,event.clientX,event.clientY);30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67canvas.onmousemove=function(event){ canvas.style.cursor="move"; var pos1=windowToCanvas(canvas,event.clientX,event.clientY); var x=pos1.x-pos.x; var y=pos1.y-pos.y; pos=pos1; imgX+=x; imgY+=y; drawImage(); } canvas.onmouseup=function(){ canvas.onmousemove=null; canvas.onmouseup=null; canvas.style.cursor="default"; } } canvas.onmousewheel=canvas.onwheel=function(event){ var pos=windowToCanvas(canvas,event.clientX,event.clientY); event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40)); if(event.wheelDelta>0){ imgScale*=2; imgX=imgX*2-pos.x; imgY=imgY*2-pos.y; }else{ imgScale/=2; imgX=imgX*0.5+pos.x*0.5; imgY=imgY*0.5+pos.y*0.5; } drawImage(); } function windowToCanvas(canvas,x,y){ var bbox = canvas.getBoundingClientRect(); return { x:x - bbox.left - (bbox.width - canvas.width) / 2, y:y - bbox.top - (bbox.height - canvas.height) / 2 };。