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. MYSQL的replace into

    replace into t(id, update_time) values(1, now()); 或 replace into t(id, update_time) select 1, now(); ...

  2. ElasticSearch 进阶

    目录 ElasticSearch 进阶 SearchAPI 检索信息 Query DSL 基本语法格式 查询-match 查询-match_phrase 查询-multi_match 查询-bool复 ...

  3. 追洞小组 | fastjson1.2.24复现+分析

    出品|MS08067实验室(www.ms08067.com) 本文作者:爱吃芝士的小葵(Ms08067实验室追洞小组成员) 1.靶场搭建 2.漏洞复现 3.漏洞分析 4.漏洞修复 5.心得 靶场搭建 ...

  4. imagemagick 之 Fred's ImageMagick Scripts 在Ubuntu 下的实践

    Fred's ImageMagick Scripts 官网:http://www.fmwconcepts.com/imagemagick/index.php Windows 10 (64-bit) u ...

  5. 攻防世界 reverse BabyXor

    BabyXor     2019_UNCTF 查壳 脱壳 dump 脱壳后 IDA静态分析 int main_0() { void *v0; // eax int v1; // ST5C_4 char ...

  6. 攻防世界 reverse EASYHOOK

    EASYHOOK XCTF 4th-WHCTF-2017 1 data=[ 0x61, 0x6A, 0x79, 0x67, 0x6B, 0x46, 0x6D, 0x2E, 0x7F, 0x5F, 2 ...

  7. 数据调度组件：基于Azkaban协调时序任务执行

    一.Azkaban概述 1.任务时序 在数据服务的业务场景中,很常见的业务流程就是日志文件经过大数据分析,再向业务输出结果数据:在该过程中会有很多任务需要执行,并且很难精准把握任务执行的结束时间,但是 ...

  8. Istio 故障注入之延时(fixedDelay)

    Istio 故障注入 Istio 故障注入与其他在网络层引入错误(例如延迟数据包或者直接杀死 Pod)的机制不同,Istio 允许在应用程序层注入故障.这使得可以注入更多相关的故障,比如 HTTP 错 ...

  9. js 一数组分割成若干个数组，并装换成字符串赋个li标签

    success: function (datas) { //请求成功后处理函数. var htmltext = ''; var data = datas.result; console.log(dat ...

  10. Java中对象的生与灭- 核心篇

    前言 大家好啊,我是汤圆,今天给大家带来的是<Java中对象的生与灭- 核心篇>,希望对大家有帮助,谢谢 文章纯属原创,个人总结难免有差错,如果有,麻烦在评论区回复或后台私信,谢啦 简介 ...