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.moveTo(100,100);

19       context.lineTo(700,700);

20       context.lineTo(100,700);

21       context.lineTo(100,100);

22       context.fillStyle="rgb(2,100,30)";

23       context.fill();

24

25       context.lineWidth=5;

26       context.strokeStyle="red";

27       context.stroke();

28    </script>

29    <!--

30       1.context.fillStyle="rgb(2,100,30)";和context.fill();//给多边形填充颜色

31       2.context.lineWidth=5;

32         context.strokeStyle="red";

33         context.stroke();

34         //为外边框着色

35     -->

36 </body>

37 </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. hibernate中关系映射的配置问题

    部门和员工属于一对多的关系 员工的账户属于一对一关系 账户和权限属于多对多关系 department.hbm.xml 1 <hibernate-mapping> 2 <class n ...

  2. python基础学习之简化占位符和格式化的概念

    简化版占位符有哪些? %s   字符串占位符,代表该位置有一个字符串待替换(万能) %d   数字占位符,代表该位置有一个数字待替换 %f    同上,这里是浮点数,float[默认保留6位小数] % ...

  3. drozer使用总结

    adb forward tcp:31415 tcp:31415 drozer console connect run app.package.list -f baidu      查看包名 run a ...

  4. arcgis10.2 全套安装教程

    一.安装LicenseManager 1.运行在licensemanager目录下的Setup.exe 2.安装完成后点击stop停止服务,然后点击"OK" 3.选择ArcGIS1 ...

  5. CSS中的块级元素，行内元素，行内块元素

    博客转载于:https://blog.csdn.net/swebin/article/details/90405950 块级元素 block 块级元素,该元素呈现块状,所以他有自己的宽度和高度,也就是 ...

  6. Ignatius and the Princess III HDU - 1028

    题目传送门:https://vjudge.net/problem/HDU-1028 思路:整数拆分构造母函数的模板题 1 //#include<bits/stdc++.h> 2 #incl ...

  7. （原创）在Linux上安装运行Python3(CentOS7为例)

    在win10上开发好的python项目要部署在Linux上要面对的问题:怎么在Linux上跑py文件呢? 以Lunix CentOS7.x平台为例,CentOS系统上自带的已有python2.x 的版 ...

  8. python那些需要知道的事儿——内存泄漏

    啥,内存也会泄露?漏了咋补?我的内存会不会越漏越小?咋一听到内存泄漏,本喵的脑子蹦出无数想法,所以到底啥是内存泄漏! 一.垃圾回收机制(GC)机制 在理解内存泄漏之前,需要补充一个知识,即GC机制(也 ...

  9. day-03-基础数据类型

    基础数类型总览 10203 123 3340 int +- * / 等等 '今天吃了没?' str 存储少量的数据,+ *int 切片, 其他操作方法 True False bool 判断真假 [12 ...

  10. [源码解析] 并行分布式任务队列 Celery 之 消费动态流程

    [源码解析] 并行分布式任务队列 Celery 之 消费动态流程 目录 [源码解析] 并行分布式任务队列 Celery 之 消费动态流程 0x00 摘要 0x01 来由 0x02 逻辑 in komb ...