1 <!DOCTYPE html>

 2 <html>

 3 <head lang="en">

 4    <meta charset="UTF-8">

 5    <title>绘制多个路径</title>

 6 </head>

 7 <body>

 8    <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:30px auto;">

 9      当前浏览器不支持Canvas,请更换浏览器

10    </canvas>

11    <script>

12       var canvas=document.getElementById('canvas');

13       canvas.width=1024;

14       canvas.height=768;//也可以在这里设置width和height

15       var context=canvas.getContext('2d');

16       //使用context进行绘制

17

18       context.beginPath();

19       context.moveTo(100,100);

20       context.lineTo(700,700);

21       context.lineTo(100,700);

22       context.lineTo(100,100);

23       context.closePath();

24

25       context.lineWidth=5;

26       context.strokeStyle="red";

27       context.stroke();

28

29       context.beginPath();

30       context.moveTo(200,100);

31       context.lineTo(700,600);

32       context.closePath();

33       context.strokeStyle="black";

34       context.stroke();

35    </script>

36    <!--

37       1.多个路径需用context.beginPath();和context.closePath();包裹起来，否则上面的样式会被下面覆盖

38     -->

39 </body>

40 </html>

实例:制作七巧板

 1 <!DOCTYPE html>

 2 <html>

 3 <head lang="en">

 4    <meta charset="UTF-8">

 5    <title>制作七巧板</title>

 6 </head>

 7 <body>

 8    <canvas id="canvas" style="border:1px solid #aaa; display:block;margin:50px auto;">

 9      当前浏览器不支持Canvas,请更换浏览器

10    </canvas>

11    <script>

12     var tangram=[

13          {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},

14          {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},

15          {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},

16          {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},

17          {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},

18          {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8eee"},

19          {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}

20     ]

21     window.onload=function(){

22        var canvas=document.getElementById("canvas");

23        canvas.width=800;

24        canvas.height=800;

25        var context=canvas.getContext("2d");

26        for(var i=0;i<tangram.length;i++){

27           draw(tangram[i],context)

28        }

29     }

30     function draw(piece,cxt){

31       cxt.beginPath();

32       cxt.moveTo(piece.p[0].x,piece.p[0].y);

33       for(var i=1;i<piece.p.length;i++){

34          cxt.lineTo(piece.p[i].x,piece.p[i].y);

35       }

36       cxt.fillStyle=piece.color;

37       cxt.fill();

38

39       cxt.strokeStyle="black";

40       cxt.lineWidth=3;

41       cxt.stroke();

42     }

43    </script>

44

45 </body>

46 </html>

效果如下：

学习Canvas绘图与动画基础 绘制多条路径（四）的更多相关文章

  1. 学习Canvas绘图与动画基础 绘制直线（二）

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  2. 学习Canvas绘图与动画基础 制作弧和圆（五）

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  3. 学习Canvas绘图与动画基础 为多边形着色（三）

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  4. 学习Canvas绘图与动画基础 canvas入门（一）

    一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta char ...

  5. 炫丽的倒计时效果Canvas绘图与动画基础

    前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...

  6. canvas-炫丽的倒计时效果Canvas绘图与动画基础

    canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支 ...

  7. 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习

    源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. >炫酷的计时器效果Canvas绘图与动画<

    >炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...

  9. WPF学习之绘图和动画

    如今的软件市场,竞争已经进入白热化阶段,功能强.运算快.界面友好.Bug少.价格低都已经成为了必备条件.这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽.是否能通过动画.3D等效果是 ...

随机推荐

  1. MIMO OFDM 常用信号检测算法

    MIMO OFDM 系统检测算法 1. 前言 MIMO的空分复用技术可以使得系统在系统带宽和发射带宽不变的情况下容易地获得空间分集增益和信道的容量增益.OFDM技术采用多个正交的子载波并行传输数据,使 ...

  2. 如何报告FreeBSD 的bug？

    https://bugs.freebsd.org/bugzilla/ 注册个账号即可,请使用英语,把程序在不同程序上的运行结果列出来即可- ​​​​ 注意标记架构,如果有log还请一并附上,英语差可以 ...

  3. gtk+2.0中函数set_widget_font_size()函数在编译时未定义的解决办法

    自己写一个头文件即可,代码如下: 在.c文件中包含该头文件即可

  4. 从键盘读入学生成绩，找出最高分， 并输出学生成绩等级（Java）

    从键盘读入学生成绩,找出最高分, 并输出学生成绩等级 一.题目 从键盘读入学生成绩,找出最高分,并输出学生成绩等级. 成绩>=最高分-10 等级为'A' 成绩>=最高分-20 等级为'B' ...

  5. HDU-6862 Hexagon (2020HDU 多校 D8 H)

    1008 题意:半径为n的六边形(由半径为1的小六边形组成),从某一个小六边形出发有六个方向,找到一条转向次数最多的路径(用方向表示)遍历所有的六边形(一个六边形只访问一次). 题解:先画出n=3/4 ...

  6. P1164_小A点菜(JAVA语言)

    思路 简单动态规划问题 题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家--餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:"随便点" ...

  7. 策略枚举：消除在项目里大批量使用if-else的正确姿势

    文/朱季谦 想起刚开始接触JAVA编程的时候,若遇到大量流程判断语句,几乎满屏都是if-else语句,多得让自己都忘了哪里是头,哪里是尾,但是,纵然满屏是if-else,但彼时也没有觉得多别扭.等到编 ...

  8. ARFoundation - touch point坐标点测试

    ARFoundation - touch point坐标点测试 本文目的是为了看一下Android手机上touch之后,对应的点相关信息,主要包括: 点的屏幕坐标,以左下角为原点: 点的viewpor ...

  9. 第4 章 ： 理解 Pod 和容器设计模式

    理解Pod和容器设计模式 本文整理自 CNCF 和阿里巴巴联合举办的云原生技术公开课的课时 4:理解 Pod 和容器设计模式.本次课程中,阿阿里巴巴高级技术专家.CNCF 官方大使张磊为大家介绍了为什 ...

  10. > 与 < 差在哪？-- Shell十三问<第十一问>

    > 与 < 差在哪?-- Shell十三问<第十一问> 谈到 I/O redirection ,不妨先让我们认识一下 File Descriptor (FD) .程序的运算,在 ...