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. CVE-2017-7529-Nginx越界读取缓存漏洞

    漏洞参考 https://blog.csdn.net/qq_29647709/article/details/85076309 漏洞原因 Nginx在反向代理站点的时候,通常会将一些文件进行缓存,特别 ...

  2. AtCoder Beginner Contest 192

    A Star #include <cstdio> using namespace std; int n; int main() { scanf("%d", &n ...

  3. Apache配置 5.访问日志不记录静态文件

    介绍:项目中的CSS.图片.js都是静态文件.一般会将静态文件放到一个单独的目录中,以方便管理. 1. 配置 # vim /usr/local/apache2.4/conf/extra/httpd-v ...

  4. Python基础（1）——变量和数据类型[xiaoshun]

    目录 一.变量 1.概述 Variables are used to store information to be referenced(引用)and manipulated(操作) in a co ...

  5. java基础详解-集合

    一.集合组成 java集合主要由Map和Collection组成,Collection主要类图如下(图片来源于网络,懒得画图): 从上图中能很明显的看出来Collection下主要是Set.List和 ...

  6. Go语言中使用K8s API及一些常用API整理

    Go Client 在进入代码之前,理解k8s的go client项目是对我们又帮助的.它是k8s client中最古老的一个,因此具有很多特性. Client-go 没有使用Swagger生成器,就 ...

  7. 攻防世界 reverse babymips

    babymips   XCTF 4th-QCTF-2018 mips,ida中想要反编译的化需要安装插件,这题并不复杂直接看mips汇编也没什么难度,这里我用了ghidra,直接可以查看反编译. 1 ...

  8. Android Studio详解项目中的资源

    •目录结构 •作用 所有以 drawable 开头的文件都是用来放图片的: 所有以 mipmap 开头的文件都是用来放应用图标的: 所有以 value 开头的文件夹都是用来放字符串.样式.颜色等配置的 ...

  9. 用优先队列构造Huffman Tree及判断是否为最优编码的应用

    前言 我们知道,要构造Huffman Tree,每次都要从堆中弹出最小的两个权重的节点,然后把这两个权重的值相加存放到新的节点中,同时让这两个节点分别成为新节点的左右儿子,再把新节点插入到堆中.假设节 ...

  10. 解决删除Azure Active Directory的Enterprise Applications异常

    当我们不需要使用某个Azure Active Directory(以下简称AAD)的时候,我们可以删除它,这个时候Azure会对当前的AAD包含的内容进行检查, 在所有的检查项目中有一个名叫" ...