1、使用画布的话，你直接在绘制的长方形基础上，在右上角再绘制一个空白的长方形就好了，然后在空白的部分绘制不规则图形；
2、或者，直接绘制一个右上角空白的图形，在空白部分进行你的绘制。
canvas按照坐标进行绘制，你直接确定坐标就给你画好了，网上关于canvas教程很多，自己看下吧。链接：网页链接
图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过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新特性的讲解。
本文实例讲述了js+html5实现canvas绘制椭圆形图案的方法，HTML5canvas
没有画椭圆的方法，以下代码可以画出椭圆，分享给大家供大家参考，具体实现方法如下：
1、在一个隐式的画布
(将
其
CSS
定义成：display:none
)
上画园。
2、将隐式画布的影像，以不同的宽高比值，画在另一个显式的画布，以使园变成椭圆。
3、进而，加进动画功能。
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=utf-8"
/>
<title>测试颜色背景</title>
<script>
var
ticker=0
var
col
=
new
Array("#000000","#A52A2A","#B8860B","pink","green","yellow","red","orange","#BB008B","#8B0000")
function
drawBackground(){
var
canvasHide=document.getElementById("hide")
//隐藏的画布
var
g=canvasHide.getContext("2d")
//找出隐藏画布
hide
的画笔
g
g.clearRect(0,0,1200,800)
//清理隐藏画布
var
i=0
do
{
//画
不同颜色
依次同心发散的园
g.beginPath()
var
grd=g.createRadialGradient(300,300,300-i*25,
300,300,265-i*25)
grd.addColorStop(0,col[(0+i+ticker)%col.length])
grd.addColorStop(1,col[(1+i+ticker)%col.length])
g.fillStyle=grd
g.arc(300,300,300-i*25,0,2*Math.PI)
g.fill()
i++
}
while(i<11)
//找出显式画布
myCanvas
的画笔
gg
var
gg=document.getElementById("myCanvas").getContext("2d")
gg.clearRect(0,0,myCanvas.width,myCanvas.height)
//清理显式画布
/*
将隐式画布
hide
的园形图像，
*
以
宽
600,
高
300
的比例,
*
画到显式画布
myCanvas,
*
结果，隐式画布
hide
的园形图像，在显式画布
myCanvas
上
成了椭圆
*/
gg.drawImage(canvasHide,0,0,600,300)
ticker++
}
function
preperation(){
setInterval('drawBackground()',1000)
}
</script>
<style>
#myCanvas{
position:absolute
left:0px
top:0px
}
#hide{
display:none
}
</style>
</head>
<body
onLoad="preperation()">
<canvas
id="myCanvas"
width="600"
height="400"
></canvas>
<canvas
id="hide"
width="600"
height="600"
></canvas>
</body>
</html>
希望本文所述对大家的web程序设计有所帮助。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）