HTML5中如何绘制图表？_随笔

图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>你的浏览器不支持canvas元素</p>

</canvas>

</div>

// 1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。

var

canvas = document.getElementById('canvas'),

context = null

context = canvas.getContext('2d')

var img = new Image()

img.src ='chart-background.png'//这里是一张具有图表背景的图片

// 2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。

img.onload = function() {

//绘制图片

context.drawImage(img, 0, 0)

//绘制直线

context.beginPath()

context.moveTo(70, 105)

context.lineTo(105, 132)

context.lineTo(142, 250)

context.lineTo(176, 175)

context.lineTo(212, 145)

context.lineTo(245, 197)

context.lineTo(280, 90)

context.stroke()

}

</script>

</body>

</html>

3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。

这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。

我这里认为大家都稍微了解甚至熟悉canvas的一些API，就不具体说，每一个参数代表什么意思了。

<!DOCTYPE html>

<html>

<head>

<title>图片加载平移放大缩小示例</title>

<style>

html,body{

margin:0px

padding:0px

}

canvas{

border: 1px solid #000

}

</style>

</head>

<body>

</body>

</html>

var canvas,context

function int(){

canvas=document.getElementById('canvas')

context=canvas.getContext('2d')

}

图片加载

创建一个图片对象之后，图片不能马上绘制到canvas上面，因为图片还没有加载完成。所以我们需要监听图片对象加载完事件，然后再去绘制。

var img,//图片对象

imgIsLoaded//图片是否加载完成

function loadImg(){

img=new Image()

img.onload=function(){

imgIsLoaded=true

//draw image

}

img.src="map.jpg"

}

图片绘制

绘制图像一个函数就可以搞定，但是需要记录这个图像的左上角坐标以及缩放比例。

var imgX,imgY,imgScale

function drawImage(){

context.clearRect(0,0,canvas.width,canvas.height)

context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale)

}

图片平移

html5事件最小细度在DOM上，所以我们无法对canvas上的图像做监听，只能对canvas监听。

首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件

mousemove事件发生之后，获得鼠标移动的位移，相应的图片的位置改变多少

mouseup事件发生之后，取消对mousemove以及mouseup事件监听

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

}

图片缩放

其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。

canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容

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()

}

这个时候，基本功能就实现了，加载一张图片和加载多张图片都差不多，维护每一张图片的位置和大小，下面来整理一下代码吧。

var canvas,context

var 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"

}

function drawImage(){

context.clearRect(0,0,canvas.width,canvas.height)

context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale)

}

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"

}

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

}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7344161.html

HTML5中如何绘制图表？

发表评论

评论列表（0条）