图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制图表</title>
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
// 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>
<script src="jquery.js"></script>
</body>
</html>
3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。
无法实现。window.location.href = "image/octet-stream"仅仅是用来将获取的图片数据在新窗口打开，浏览器就会自动提示下载。
可问题是image的数据从哪儿来？HTML5里面的Canvas支持象素级 *** 作，可以获取图像数据，但一个网页不是一张图片，它是有许多的DOM和样式渲染而成，在JS中是无法将其转换成一张图片的，除非浏览器提供相关API，但目前并没有浏览器提供了类似的API，因此暂时无法实现。
你看现在所有的截图，要么是浏览器自带的，要么就要安装插件。
<bean id="propertyPlaceholderConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">configure:3427: gcc --version >&5
i686-apple-darwin11-llvm-gcc-4.2 (GCC) 4.2.1 (Based on Apple Inc. build 5658) (LLVM build 2336.11.00)
Copyright (C) 2007 Free Software Foundation, Inc.
This is free softwaresee the source for copying conditions. There is NO
warrantynot even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）