不二如是 发表于 2017-3-13 10:22:18

0 0 7 5 - 手把手带你玩儿Canvas

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



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

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

江湖上有句名言：

出来混迟早是要还的

像在74、73、实用8、72、71都是用Css来绘图，难度还是有点的。

而Canvas（画布）是HTML5中专门用于绘图的一种容器。

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

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

要想使用Canvas，必须要在HTML的body中嵌入一个Canvas元素说明：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
   
</head>
<body>
    <canvas id="firstCanvas" width="666" height="333"></canvas>
</body>
</html>
先定义一个id属性名为‘firstCanvas’的画布容器，宽度666px，高度333px。

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

不要担心，还是很好理解的～

特别说明：

**** Hidden Message *****

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

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

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

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

      context.stroke();//为创建好的路径描边
      
    </script>
</body>
效果图：


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

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

没错，当然有3d。。。

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

这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

zgbjmy2008 发表于 2017-3-15 15:03:53

楼主，你是一个大好人！！

不二如是 发表于 2017-3-15 15:07:14

zgbjmy2008 发表于 2017-3-15 15:03
楼主，你是一个大好人！！

跨越好大～

sunbocheng 发表于 2017-6-12 11:25:41

{:10_281:}{:10_281:}

aswyamato1989 发表于 2017-8-23 08:14:09

回复看帖

aswyamato1989 发表于 2017-8-23 08:39:52

交作业！

Lee.C 发表于 2017-9-1 17:37:53

看一下隐藏内容

还差几 发表于 2017-9-3 11:37:35

看看

庚午 发表于 2018-2-21 22:27:22

context.strokeStyle='#FF0000';
线条的颜色修改了

a211827754 发表于 2018-8-23 17:13:52

撸啊撸啊撸

我爱鱼C！ 发表于 2018-8-27 14:58:57

666

想成大神 发表于 2018-12-15 13:15:25

膜拜

微末非末 发表于 2019-1-3 10:46:14

颜色值少了个"#"号, context.strokeStyle 那句

莫希 发表于 2019-1-14 13:40:55

RE: 0 0 7 5 - 手把手带你玩儿Canvas [修改]

houyi299 发表于 2019-1-19 20:43:38

通45 月 45一条5 圆通

TCY 发表于 2019-2-15 10:00:10

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

佛熙博士 发表于 2019-7-28 19:47:18

让我看看

土豆拌饭 发表于 2019-7-29 09:47:20

0.0

xianyu_meng 发表于 2019-11-10 15:50:14

<body>
    <canvas id="firstCanvas" width="666" height="333">你的游览器不支持玩Canvas</canvas>
    <script type="text/javascript">
      let canvas = document.getElementById('firstCanvas');
      let context = canvas.getContext('2d');

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

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

      context.stroke();// 为创建的路径描边
    </script>
</body>

suweixuan1998 发表于 2020-1-13 11:28:03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>

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

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

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

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

</script>
</body>
</html>
页: [1] 2 3
查看完整版本: 0 0 7 5 - 手把手带你玩儿Canvas