在同一个canvas中绘制多个图形
2013-08-31 21:00
211 查看
实验背景:
在做一个 HTML 5 的一个游戏项目的时候,想在同一个 canvas 元素中绘制多个具有不同颜色的图画,但是由于当时对 HTML 5 canvas 元素不是很熟悉,结果总是所有图画都具有一样的颜色。去网上查找,也没有找到这个问题的答案,于是只能自己研究了。
实验说明:
该项目本是移动平台的跨平台项目,可以跑在WP7,WP8,Andriod,iOS,黑莓等平台,但由于 HTML 5 本身具有较好的跨平台性,所以在保证平台兼容性没有问题的
情况下,本次测试在PC上进行。
实验目的:
在同一个 canvas 元素中绘制多个不同颜色的图画
实验材料:
语言:HTML5,javascript
开发工具:VS 2012
测试工具:IE 10
实验过程:
首先创建一个 HTML 5 的基本页面,并添加一个 canvas 元素,id 为 myCanvas,然后添加 JS 代码,绘制四个小圆圈
代码如下:
[html]
view plaincopyprint?
<!DOCYTPE html>
<html>
<head>
<meta charset="utf-8" />
<title>在同一个 canvas 元素中绘制不同颜色的图画</title>
<script>
function start()
{
var c = document.getElementById("myCanvas")
var cxt = c.getContext("2d")
cxt.fillStyle = "#FF00FF"
cxt.arc(100, 100, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.fillStyle = "#FF0000"
cxt.arc(200, 200, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.fillStyle = "#FFFF00"
cxt.arc(300, 300, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.fillStyle = "#000000"
cxt.arc(400, 400, 50, 0, Math.PI * 2, true)
cxt.fill()
}
</script>
</head>
<body onload="start()">
<canvas id="myCanvas" height="1000" width="1000">
你的浏览器不支持 HTML 5
</canvas>
</body>
</html>
效果如图:
![](http://img.blog.csdn.net/20130619191638375)
代码说明:
本想为四个圆填充不同颜色,但最终结果是四个圆全部是黑色,即第四个圆的颜色,难道 一个 canvas 中只能有一种
fillStyle 吗?如果只有一种颜色,岂不是太单一?于是我又进行了多次测试。
经过测试,最终找到了一个解决方案。
canvas 绘制可以通过 JS 代码来控制(其实应该说 HTML 5 只是提供了个容器,绘制只能在 JS 里完成),而 JS 提
供了两个函数,beginPath() 和 closePath() ,这两
个函数可以起到类似 <div> 的作用,用它来把每个圆圈包围,就可以绘制不同颜色的图形了。
代码如下:
[html]
view plaincopyprint?
<!DOCYTPE html>
<html>
<head>
<meta charset="utf-8" />
<title>在同一个 canvas 元素中绘制不同颜色的图画</title>
<script>
function start()
{
var c = document.getElementById("myCanvas")
var cxt = c.getContext("2d")
cxt.beginPath() //注意此处
cxt.fillStyle = "#FF00FF"
cxt.arc(100, 100, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.closePath() //注意此处
cxt.beginPath() //注意此处
cxt.fillStyle = "#FF0000"
cxt.arc(200, 200, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.closePath() //注意此处
cxt.beginPath() //注意此处
cxt.fillStyle = "#FFFF00"
cxt.arc(300, 300, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.closePath() //注意此处
cxt.beginPath() //注意此处
cxt.fillStyle = "#000000"
cxt.arc(400, 400, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.closePath() //注意此处
}
</script>
</head>
<body onload="start()">
<canvas id="myCanvas" height="1000" width="1000">
你的浏览器不支持 HTML 5
</canvas>
</body>
</html>
效果如图:
![](http://img.blog.csdn.net/20130619191743203)
请读者们注意,两个函数有所属的对象,此事例中为 cxt 。
另外,在测试中,笔者还发现,当去掉所有的 closePath() 时,只保留 beginPath() ,一样可以达到目的,也就是
说,当遇到beginPath() 时,会自动重新开始下一个图形
的绘制(保留 closePath() ,去掉 beginPath() 时,效果相当于不添加这两个函数)。但是笔者个人认为,最好两个
函数都添加,这样会提高代码可读性,使代码更规
范。
实验结果:
成功在同一个 canvas 元素中绘制出不同颜色的多个图形,并且还对 beginPath() 和 closePath() 的用法有了意外收获。
实验总结:HMTL 5 的 canvas 是一大亮点,可以绘制出精美的图形(本文只是对某种用法的讨论,真正的 canvas
的功能要比此例强大的多),但对在实验中意外收获
的beginPath() 和closePath() 函数的用法,以及由此联想出的 canvas 绘制图形的机制,笔者还很不清楚,会在以后
找时间继续研究。
在做一个 HTML 5 的一个游戏项目的时候,想在同一个 canvas 元素中绘制多个具有不同颜色的图画,但是由于当时对 HTML 5 canvas 元素不是很熟悉,结果总是所有图画都具有一样的颜色。去网上查找,也没有找到这个问题的答案,于是只能自己研究了。
实验说明:
该项目本是移动平台的跨平台项目,可以跑在WP7,WP8,Andriod,iOS,黑莓等平台,但由于 HTML 5 本身具有较好的跨平台性,所以在保证平台兼容性没有问题的
情况下,本次测试在PC上进行。
实验目的:
在同一个 canvas 元素中绘制多个不同颜色的图画
实验材料:
语言:HTML5,javascript
开发工具:VS 2012
测试工具:IE 10
实验过程:
首先创建一个 HTML 5 的基本页面,并添加一个 canvas 元素,id 为 myCanvas,然后添加 JS 代码,绘制四个小圆圈
代码如下:
[html]
view plaincopyprint?
<!DOCYTPE html>
<html>
<head>
<meta charset="utf-8" />
<title>在同一个 canvas 元素中绘制不同颜色的图画</title>
<script>
function start()
{
var c = document.getElementById("myCanvas")
var cxt = c.getContext("2d")
cxt.fillStyle = "#FF00FF"
cxt.arc(100, 100, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.fillStyle = "#FF0000"
cxt.arc(200, 200, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.fillStyle = "#FFFF00"
cxt.arc(300, 300, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.fillStyle = "#000000"
cxt.arc(400, 400, 50, 0, Math.PI * 2, true)
cxt.fill()
}
</script>
</head>
<body onload="start()">
<canvas id="myCanvas" height="1000" width="1000">
你的浏览器不支持 HTML 5
</canvas>
</body>
</html>
<!DOCYTPE html> <html> <head> <meta charset="utf-8" /> <title>在同一个 canvas 元素中绘制不同颜色的图画</title> <script> function start() { var c = document.getElementById("myCanvas") var cxt = c.getContext("2d") cxt.fillStyle = "#FF00FF" cxt.arc(100, 100, 50, 0, Math.PI * 2, true) cxt.fill() cxt.fillStyle = "#FF0000" cxt.arc(200, 200, 50, 0, Math.PI * 2, true) cxt.fill() cxt.fillStyle = "#FFFF00" cxt.arc(300, 300, 50, 0, Math.PI * 2, true) cxt.fill() cxt.fillStyle = "#000000" cxt.arc(400, 400, 50, 0, Math.PI * 2, true) cxt.fill() } </script> </head> <body onload="start()"> <canvas id="myCanvas" height="1000" width="1000"> 你的浏览器不支持 HTML 5 </canvas> </body> </html>
效果如图:
代码说明:
本想为四个圆填充不同颜色,但最终结果是四个圆全部是黑色,即第四个圆的颜色,难道 一个 canvas 中只能有一种
fillStyle 吗?如果只有一种颜色,岂不是太单一?于是我又进行了多次测试。
经过测试,最终找到了一个解决方案。
canvas 绘制可以通过 JS 代码来控制(其实应该说 HTML 5 只是提供了个容器,绘制只能在 JS 里完成),而 JS 提
供了两个函数,beginPath() 和 closePath() ,这两
个函数可以起到类似 <div> 的作用,用它来把每个圆圈包围,就可以绘制不同颜色的图形了。
代码如下:
[html]
view plaincopyprint?
<!DOCYTPE html>
<html>
<head>
<meta charset="utf-8" />
<title>在同一个 canvas 元素中绘制不同颜色的图画</title>
<script>
function start()
{
var c = document.getElementById("myCanvas")
var cxt = c.getContext("2d")
cxt.beginPath() //注意此处
cxt.fillStyle = "#FF00FF"
cxt.arc(100, 100, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.closePath() //注意此处
cxt.beginPath() //注意此处
cxt.fillStyle = "#FF0000"
cxt.arc(200, 200, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.closePath() //注意此处
cxt.beginPath() //注意此处
cxt.fillStyle = "#FFFF00"
cxt.arc(300, 300, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.closePath() //注意此处
cxt.beginPath() //注意此处
cxt.fillStyle = "#000000"
cxt.arc(400, 400, 50, 0, Math.PI * 2, true)
cxt.fill()
cxt.closePath() //注意此处
}
</script>
</head>
<body onload="start()">
<canvas id="myCanvas" height="1000" width="1000">
你的浏览器不支持 HTML 5
</canvas>
</body>
</html>
<!DOCYTPE html> <html> <head> <meta charset="utf-8" /> <title>在同一个 canvas 元素中绘制不同颜色的图画</title> <script> function start() { var c = document.getElementById("myCanvas") var cxt = c.getContext("2d") cxt.beginPath() //注意此处 cxt.fillStyle = "#FF00FF" cxt.arc(100, 100, 50, 0, Math.PI * 2, true) cxt.fill() cxt.closePath() //注意此处 cxt.beginPath() //注意此处 cxt.fillStyle = "#FF0000" cxt.arc(200, 200, 50, 0, Math.PI * 2, true) cxt.fill() cxt.closePath() //注意此处 cxt.beginPath() //注意此处 cxt.fillStyle = "#FFFF00" cxt.arc(300, 300, 50, 0, Math.PI * 2, true) cxt.fill() cxt.closePath() //注意此处 cxt.beginPath() //注意此处 cxt.fillStyle = "#000000" cxt.arc(400, 400, 50, 0, Math.PI * 2, true) cxt.fill() cxt.closePath() //注意此处 } </script> </head> <body onload="start()"> <canvas id="myCanvas" height="1000" width="1000"> 你的浏览器不支持 HTML 5 </canvas> </body> </html>
效果如图:
请读者们注意,两个函数有所属的对象,此事例中为 cxt 。
另外,在测试中,笔者还发现,当去掉所有的 closePath() 时,只保留 beginPath() ,一样可以达到目的,也就是
说,当遇到beginPath() 时,会自动重新开始下一个图形
的绘制(保留 closePath() ,去掉 beginPath() 时,效果相当于不添加这两个函数)。但是笔者个人认为,最好两个
函数都添加,这样会提高代码可读性,使代码更规
范。
实验结果:
成功在同一个 canvas 元素中绘制出不同颜色的多个图形,并且还对 beginPath() 和 closePath() 的用法有了意外收获。
实验总结:HMTL 5 的 canvas 是一大亮点,可以绘制出精美的图形(本文只是对某种用法的讨论,真正的 canvas
的功能要比此例强大的多),但对在实验中意外收获
的beginPath() 和closePath() 函数的用法,以及由此联想出的 canvas 绘制图形的机制,笔者还很不清楚,会在以后
找时间继续研究。
相关文章推荐
- [实验]在同一个 canvas 元素中绘制不同颜色的图形
- Matlab一个窗口中绘制多个图形
- 【一天一个canvas】绘制一个简单的矩形框(四)
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- C++ Builder 使用Canvas的方法来绘制图形对象
- Canvas绘制基础图形
- Andriod自定义View二:canvas.drawText参数的介绍以及绘制一个文本居中的案例
- 微信小程序canvas绘制图形基础
- Raphael一个用于在网页中绘制矢量图形的Javascript库
- 使用canvas来绘制图形
- Android画布和图形绘制---Canvas and Drawables(五)
- 在网上看到一个通过css绘制各种图形的文章留底
- 使用Canvas绘制几何图形
- html5-Canvas可以在web中绘制各种图形
- opera下canvas绘制圆弧arc的一个bug
- 每天一个OpenGL程序 第六篇 图形的组合绘制
- 利用canvas.save()、canvas.restore()、canvas.translate()、canvas.rotate()绘制一个时钟表盘
- Android隐喻(三) 图形绘制: Canvas、SurfaceView、Paint、Surface、SurfaceHolder、Bitmap
- 图形绘制 Canvas Paint Path 详解
- HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill