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

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

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

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

x

本帖最后由不二如是于 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的代码。。。

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

特别说明：

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

所有的图形都要通过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。。。

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

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

）

官方 Web 课程：

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

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

想成大神 · 发表于 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

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>

账号		自动登录	找回密码
密码			立即注册

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

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

评分

本帖被以下淘专辑推荐: