鱼C论坛

 找回密码
 立即注册
查看: 5626|回复: 45

[庖丁解牛] 0 0 7 5 - 手把手带你玩儿Canvas

[复制链接]
发表于 2017-3-13 10:22:18 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2021-8-11 11:08 编辑

Snip20170313_769.png


好吧,Canvas既然怎么也绕不过,那就介绍一下咯~

0 0 6 5 - Canvas粒子动画 - 只挖待填坑也挖了,那就填吧。。。

江湖上有句名言:

出来混迟早是要还的


像在7473实用87271都是用Css来绘图,难度还是有点的。

Canvas(画布)是HTML5中专门用于绘图的一种容器

不言而喻,一定比用CSS绘图要方便很多,但是,难度还是有滴~

而这次,我就从最简单最简单最简单的一个点切入:用Canvas画线。。。

要想使用Canvas,必须要在HTML的body中嵌入一个Canvas元素说明:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Canvas</title>
  6.    
  7. </head>
  8. <body>
  9.     <canvas id="firstCanvas" width="666" height="333"></canvas>
  10. </body>
  11. </html>
复制代码

先定义一个id属性名为‘firstCanvas’的画布容器,宽度666px,高度333px。

要实现,绘图,还要使用一些JavaScript的代码。。。

不要担心,还是很好理解的~

特别说明:

游客,如果您要查看本帖隐藏内容请回复


所有的图形都要通过Canvas元素的getContext()方法返回绘图环境,然后才能使用。

既然说画线,那就画一条线,同样这段代码放在body中
  1. <body>
  2.     <canvas id="firstCanvas" width="666" height="333">你的浏览器不支持玩Canvas</canvas>
  3.     <script type="text/javascript">
  4.         var canvas=document.getElementById("firstCanvas");//创建并加载firstCanvas
  5.          var context=canvas.getContext("2d");

  6.          context.strokeStyle = "0FF";
  7.          context.lineWidth = 6;

  8.          context.moveTo(99,99);//起点坐标
  9.          context.lineTo(299,299);//终点坐标

  10.         context.stroke();//为创建好的路径描边
  11.         
  12.     </script>
  13. </body>
复制代码

效果图:
Snip20170313_771.png


上面是所有代码,是最简单的套路。。。

getContext方法的参数为2d,表示创建了一个二维环境。

没错,当然有3d。。。

不过既然是最简单最简单最简单的,那么就到这里吧。。。

这位鱼油,如果喜欢本帖子,请订阅 专辑-->传送门)(不喜欢更要订阅


官方 Web 课程:

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 无条件支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-15 15:03:53 | 显示全部楼层
楼主,你是一个大好人!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 0 反对 1

使用道具 举报

 楼主| 发表于 2017-3-15 15:07:14 | 显示全部楼层
zgbjmy2008 发表于 2017-3-15 15:03
楼主,你是一个大好人!!

跨越好大~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-6-12 11:25:41 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-8-23 08:14:09 | 显示全部楼层
回复看帖
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-8-23 08:39:52 | 显示全部楼层
交作业!
075.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-9-1 17:37:53 | 显示全部楼层
看一下隐藏内容
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-9-3 11:37:35 | 显示全部楼层
看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-2-21 22:27:22 | 显示全部楼层
context.strokeStyle='#FF0000';
线条的颜色修改了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-23 17:13:52 | 显示全部楼层
撸啊撸啊撸
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-8-27 14:58:57 | 显示全部楼层
666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-12-15 13:15:25 | 显示全部楼层
膜拜
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-1-3 10:46:14 | 显示全部楼层
颜色值少了个"#"号, context.strokeStyle 那句
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-14 13:40:55 | 显示全部楼层
RE: 0 0 7 5 - 手把手带你玩儿Canvas [修改]
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-19 20:43:38 | 显示全部楼层
通45 月 45一条5 圆通
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-15 10:00:10 | 显示全部楼层
所有的图形都要通过Canvas元素的getContext()方法返回绘图环境,然后才能使用。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-7-28 19:47:18 | 显示全部楼层
让我看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-7-29 09:47:20 | 显示全部楼层
0.0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-11-10 15:50:14 | 显示全部楼层
  1. <body>
  2.     <canvas id="firstCanvas" width="666" height="333">你的游览器不支持玩Canvas</canvas>
  3.     <script type="text/javascript">
  4.         let canvas = document.getElementById('firstCanvas');
  5.         let context = canvas.getContext('2d');

  6.         context.strokeStyle = '#0ff';
  7.         context.lineWidth = 6;

  8.         context.moveTo(99,99); // 起点坐标
  9.         context.lineTo(299,299); //终点坐标

  10.         context.stroke();  // 为创建的路径描边
  11.     </script>
  12. </body>
复制代码
1.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-13 11:28:03 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Canvas</title>

  6. </head>
  7. <body>
  8. <canvas id="firstCanvas" width="666" height="333">你的浏览器不支持玩Canvas</canvas>
  9. <script type="text/javascript">
  10.     var canvas=document.getElementById("firstCanvas");//创建并加载firstCanvas
  11.     var context=canvas.getContext("2d");

  12.     context.strokeStyle = "#0FF";
  13.     context.lineWidth = 6;

  14.     context.moveTo(99,99);//起点坐标
  15.     context.lineTo(299,299);//终点坐标

  16.     context.stroke();//为创建好的路径描边

  17. </script>
  18. </body>
  19. </html>
复制代码
1578886038(1).jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 15:28

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表