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. dubbo实战之四：管理控制台dubbo-admin

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  2. Educational Codeforces Round 98 (Rated for Div. 2)

    A 如果\(n = m\),答案为\(2 \times n\):如果\(n \ne m\),答案为\(2 \times max(n,m) - 1\) #include <bits/stdc++. ...

  3. Java 树结构实际应用 四（平衡二叉树/AVL树）

    平衡二叉树(AVL 树) 1 看一个案例(说明二叉排序树可能的问题) 给你一个数列{1,2,3,4,5,6},要求创建一颗二叉排序树(BST), 并分析问题所在.  左边 BST 存在的问题分析: ...

  4. 在Python中创建M x N的数组

    在Python中创建M x N的数组 一般有三种方法: 列表乘法 dp = [[0] * n] * m for 循环 dp= [[0 for _ in range(n)] for _ in range ...

  5. [系统重装日志2]win10系统安装pytorch0.4.1（gpu版本）

    目录 0,资源整理 1,安装最新版的显卡驱动 2,安装visual studio 3,安装cuda 4,安装cudnn,配置环境变量 5,安装pytorch 6,安装torchvision 7,验证 ...

  6. C++并发与多线程学习笔记--线程之间调度

    condition_variable wait() notify_one notify_all condition_variable 条件变量的实际用途: 比如有两个线程A和B,在线程A中等待一个条件 ...

  7. SVN讲解

    1.SVN是什么? 代码版本管理工具 它能记住你每次的修改 查看所有的修改记录 恢复到任何历史版本 恢复到已经删除的文件 2.SVN和Git相比,有什么优势? 使用简单,上手快 git没有目录级权限控 ...

  8. 2021年春软件工程"助教团队"成员介绍

    2021年春软件工程 助教团队 成员介绍 项目 内容 这个作业属于那个课程 2021春季学期软件工程(罗杰.任健) 这个作业的要求在哪里 团队介绍 姓名 照片 个人介绍 分工 刘Q 本团队的PM,和助 ...

  9. 结对编程_stage2

    项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 结对项目-第二阶段 我在这个课程的目标是 从实践中学习软件工程相关知识(结构化分析和设计方法.敏捷开发方法. ...

  10. Centos下搭建DNS域名解析服务器

    Centos下搭建DNS域名解析服务器 DNS  即Domain Name System(域名系统)的缩写,它是一种将ip地址转换成对应的主机名或将主机名转换成与之相对应ip地址的一种机制.其中通过域 ...