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. 虚拟机安装centos系统【史上最详细的】

    因为文章中有很多的图片,在博客园中还需要单张上传,所以使用了将markdown的文件链接存入网盘中让大家下载 windows系统请使用Typora软件打开 如果不知道Typora是什么软件,请在百度搜 ...

  2. kali Linux树莓派的完整配置，以及python环境的配置

    kali Linux树莓派3b+的环境配置,以及python开发环境的配置 首先需要正确组装树莓派的硬件,所需:一块8G以上的内存卡,(一般情况下淘宝购买的时候都会选择一个,需要一个稳定的电源输出,防 ...

  3. P4285 [SHOI2008]汉诺塔 题解 （乱搞）

    题目链接 P4285 [SHOI2008]汉诺塔 解题思路 提供一种打表新思路 先来证明一个其他题解都没有证明的结论:\(ans[i]\)是可由\(ans[i-1]\)线性递推的. (\(ans[i] ...

  4. mybatis&plus系列------Mysql的JSON字段的读取和转换

    mybatis&plus系列------Mysql的JSON字段的读取和转换 一. 背景 在平常的开发中,我们可能会有这样的需求: 业务数据在存储的时候,并不是以mysql中的varchar丶 ...

  5. vim下在插件emmet

    试了很多种方法,结果都没有用,最后找到了完美的解决方法! 1.方式1 1.1下载emmet并解压 1.2 cd /home/debian8/Downloads/emmet-vim-master/plu ...

  6. 世界国省市区SQL语句（mysql）

    CREATE TABLE loctionall ( country VARCHAR(40) , provice VARCHAR(40) , city VARCHAR(40) , CONSTRAINT ...

  7. linux screen的用法

    今天使用vps时,起了一个http服务,因为需要用nc接收流量,就要关闭http服务,再去用nc接收流量就接收不到,请教了师傅,这里需要用到screen创建一个会话,就能http服务跟nc同时进行. ...

  8. [Design Pattern With Go]设计模式-工厂模式

    这次介绍的设计模式是工厂模式,这是一个比较常见的创建型模式.一般情况下,工厂模式分为三种:简单工厂.工厂方法和抽象工厂,下面慢慢举例介绍下. 简单工厂 考虑一个加密程序的应用场景,一个加密程序可能提供 ...

  9. Nacos 2.0 正式发布，性能提升了 10 倍！！

    前不久,在3月20号,Nacos 2.0.0 正式发布了!我简单看了下官方的介绍,可能nacos未来逐渐会成为各大公司作为服务治理和配置中心的主要中间件. Nacos 简介:一个更易于构建云原生应用的 ...

  10. Kubernetes 用户流量接入方案

    总结Kubernetes 生产环境用户流量接入方案 方案1 client -> ddos -> waf -> slb 7层域名 -> nginx端口 -> ingress ...