在同一个canvas中绘制多个图形

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量1w 收藏 7
点赞数 5
分类专栏： html javaScript 文章标签： javascript 图形 html5 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 plain copy print ?
  1. <!DOCYTPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>在同一个 canvas 元素中绘制不同颜色的图画</title>  
  6.         <script>  
  7.             function start()  
  8.             {  
  9.                 var c = document.getElementById("myCanvas")  
  10.                 var cxt = c.getContext("2d")  
  11.   
  12.                 cxt.fillStyle = "#FF00FF"  
  13.                 cxt.arc(100, 100, 50, 0, Math.PI * 2, true)  
  14.                 cxt.fill()   
  15.   
  16.                 cxt.fillStyle = "#FF0000"  
  17.                 cxt.arc(200, 200, 50, 0, Math.PI * 2, true)  
  18.                 cxt.fill()  
  19.   
  20.                 cxt.fillStyle = "#FFFF00"  
  21.                 cxt.arc(300, 300, 50, 0, Math.PI * 2, true)  
  22.                 cxt.fill()  
  23.   
  24.                 cxt.fillStyle = "#000000"  
  25.                 cxt.arc(400, 400, 50, 0, Math.PI * 2, true)  
  26.                 cxt.fill()  
  27.             }  
  28.         </script>  
  29.     </head>  
  30.     <body onload="start()">  
  31.         <canvas id="myCanvas" height="1000" width="1000">  
  32.             你的浏览器不支持 HTML 5  
  33.         </canvas>  
  34.     </body>  
  35. </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 οnlοad="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 plain copy print ?
  1. <!DOCYTPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <title>在同一个 canvas 元素中绘制不同颜色的图画</title>  
  6.         <script>  
  7.             function start()  
  8.             {  
  9.                 var c = document.getElementById("myCanvas")  
  10.                 var cxt = c.getContext("2d")  
  11.   
  12.                 cxt.beginPath() //注意此处  
  13.                 cxt.fillStyle = "#FF00FF"  
  14.                 cxt.arc(100, 100, 50, 0, Math.PI * 2, true)  
  15.                 cxt.fill()  
  16.                 cxt.closePath() //注意此处  
  17.   
  18.                 cxt.beginPath() //注意此处  
  19.                 cxt.fillStyle = "#FF0000"  
  20.                 cxt.arc(200, 200, 50, 0, Math.PI * 2, true)  
  21.                 cxt.fill()  
  22.                 cxt.closePath() //注意此处  
  23.   
  24.                 cxt.beginPath() //注意此处  
  25.                 cxt.fillStyle = "#FFFF00"  
  26.                 cxt.arc(300, 300, 50, 0, Math.PI * 2, true)  
  27.                 cxt.fill()  
  28.                 cxt.closePath() //注意此处  
  29.   
  30.                 cxt.beginPath() //注意此处  
  31.                 cxt.fillStyle = "#000000"  
  32.                 cxt.arc(400, 400, 50, 0, Math.PI * 2, true)  
  33.                 cxt.fill()  
  34.                 cxt.closePath() //注意此处  
  35.             }  
  36.         </script>  
  37.     </head>  
  38.     <body onload="start()">  
  39.         <canvas id="myCanvas" height="1000" width="1000">  
  40.             你的浏览器不支持 HTML 5  
  41.         </canvas>  
  42.     </body>  
  43. </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 οnlοad="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 绘制图形的机制，笔者还很不清楚，会在以后

找时间继续研究。

13东倍
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 canvas自定义绘制多边图形代码
11-06
html5 canvas自定义绘制多边图形代码 html5 canvas自定义绘制多边图形代码
【无标题】vue canvas画多边形
Jokerxiuka的博客
08-09 358
vue绘制多边形
解决批量绘制canvas卡顿的问题
BUST_ORANGE的博客
03-15 683
总结：懒加载是很有必要的，本地缓存效果也不错，web woker子线程只是提供了一种优化思路，但是效果聊胜于无，感兴趣的可以试一下。
Android入门——利用Canvas完成绘制点、圆、直线、路径、椭圆、多边形等2D图形
热门推荐
最美不过，心中有梦，身旁有你！
10-07 1万+
引言一个成功的APP离不开优秀的UI，像墨迹天气等其他APP的一些精彩特效，仅仅依靠系统自带的UI组件是绝不可能实现。所以Android提供了另一种构造UI组件的方式——通过画布Canvas自己绘画，不夸张地说“只有想不到，没有做不到”配以各种动画效果就能实现。
canvas 画线
weixin_33923762的博客
03-27 106
一、canvas是基于状态的绘图环境 1、canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWidth=10; //直线的宽度状态设置 context.strokeStyle="#058"; //直线的颜色状态设置 都是状态设置。 context.stroke()是绘制。 lin...
一文入坑【Canvas】多图与案例详解
发果叁
12-14 963
笔者多次尝试，哪怕作弊，时间也在110秒左右，真的很考验记忆力整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
[实验]在同一个 canvas 元素中绘制不同颜色的图形
shao_winds的专栏
06-19 1万+
声明： 这是我第一次写正式的技术博客，作为大一学生，实在不能保证写出高质量的技术博客，只是想把自己遇到的问题和对一些事情的看法拿来和大家分享，请大神们果断批评指正，请比我还菜的新手们也多多思考。大家有问题多多交流，“闻道有先后，术业有专攻”，大家共同努力，共同进步！   实验背景： 在做一个 HTML 5 的一个游戏项目的时候，想在同一个 canvas 元素中绘制多个具有不同颜色的图画，但
使用Canvas画出多个多边形Polygon
⑥②专栏
06-06 1265
使用Canvas画出多个多边形Polygon
如何使用canvas绘制多个图形块，并可以拖动。
qq_37070696的博客
04-15 1834
canvas图形绘制； canvas图形拖动； JavaScript构造函数； canvas绘制多个图形块，并可以拖动；
关于canvas画布上绘制多个（单个也一样）不规则多边形，用户点击这张画布时，判断点击的是哪个多边形
qq_42023279的博客
07-30 1355
首先来看看canvas效果图 上面是我在canvas上绘制了多个不规则多边形，如果不是很了解怎么绘制，可以看我上个博客canvas画图 盒子结构 <div class="imgBox" ref="canvas"> <canvas id="myCanvas" width="660px" height="260px" @click="getWorkShop"></canvas> </div> 样式 .imgBox { width: 100%
h5 Canvas正多边形绘制
suwu150
03-23 2406
在之前文章中,我们使用线段进行绘制过矩形,使用arc,arcTo绘制过圆弧和圆形,但是Canvas还能够进行绘制其他图形,比如三角形、六边形、八边形等.这篇文章主要就是说明如何绘制多边形. JS 效果如下: 上述代码,我们进行绘制了一组根据时间进行变化的生成的多边形,通过方法drawHorizontalAxis绘制横向坐标轴,方法drawVerticalAxis绘制纵向坐标轴,通过方法getPolygonPoints进行计算获取多边形中所有的点,进行为后面连线时连接点作准备工作,通过createPo
canvas绘制树形结构可视图形的实现
12-28
如下图，最近项目中需要这么个树形结构可视化数据图形，找了好多可视化插件，没有找到可用的，所以就自己画了一个，代码如下。 树形分支是后端接口返回数据渲染，可展示多条； 代码可拓展，可封装； 点击节点可...
canvas:使用WebSocket在服务器浏览器中的Web浏览器中HTML 2D画布上绘制
05-01
它提供了一种便携式方法，可以从Go程序中创建交互式2D图形。 Go程序（服务器）使用二进制格式通过WebSockets将绘制命令发送到Web浏览器（客户端）。 反过来，客户端将键盘，鼠标和触摸事件发送到服务器。 该模块不...
Canvas多边形绘制
09-24
javascript实现任意角度正多边形绘制canvas图形源码.
canvas 如何绘制线段的实现方法
12-14
学习canvas，首先得知道如何去绘制线段，然后才能通过很多简单的线段去实现比较复杂的图形，比如常见的图表，柱状图，折线图等都是通过一段一段的线段实现的。 基础知识 canvas 的基础知识不算多，主要掌握如何绘制...
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 866
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
飞云先生
04-30 124
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 939
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 1013
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
Canvas 是 HTML5 中的一个标签，可以用来绘制 2D 图形。如果要在 Canvas 中绘制一颗树js代码
06-01
以下是一个简单的示例代码，用于在 Canvas 中绘制一棵树： ```html <!DOCTYPE html> <html> <head> <title>Canvas 绘制树</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制树干 ctx.beginPath(); ctx.moveTo(250, 200); ctx.lineTo(250, 400); ctx.strokeStyle = "brown"; ctx.lineWidth = 20; ctx.stroke(); // 绘制树叶 ctx.beginPath(); ctx.arc(250, 150, 50, 0, 2 * Math.PI); ctx.fillStyle = "green"; ctx.fill(); ctx.beginPath(); ctx.arc(200, 200, 50, 0, 2 * Math.PI); ctx.fillStyle = "green"; ctx.fill(); ctx.beginPath(); ctx.arc(300, 200, 50, 0, 2 * Math.PI); ctx.fillStyle = "green"; ctx.fill(); ctx.beginPath(); ctx.arc(250, 250, 50, 0, 2 * Math.PI); ctx.fillStyle = "green"; ctx.fill(); ctx.beginPath(); ctx.arc(220, 300, 50, 0, 2 * Math.PI); ctx.fillStyle = "green"; ctx.fill(); ctx.beginPath(); ctx.arc(280, 300, 50, 0, 2 * Math.PI); ctx.fillStyle = "green"; ctx.fill(); </script> </body> </html> ``` 以上代码绘制了一棵树，包括树干和多个树叶。你可以根据需要修改树干的位置、长度和颜色，以及树叶的位置、大小和颜色，来绘制不同的树。如果需要绘制更复杂的树，可以考虑使用递归或循环来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值