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. [virtualenv][python] 环境管理——对 virtualenv 更轻便的封装

    virtualenv_simple_wrapper 如有错误,欢迎指出 Char-z 项目地址 gitee: virtualenv_simple_wrapper 使用说明 下载文件 virtualen ...

  2. uni-app(二)接口请求封装，全局输出api

    在项目 main.js 同级创建 utils 文件夹, utils里创建 config.js文件,存储重要参数 // 获取平台信息 const { system, } = uni.getSystemI ...

  3. 怎么用Markdown在github上写书，并用pages展示

    怎么用git写书 安装环境 第一步 安装node npm 先检测自己电脑是否安装了node npm # 查看 node 版本 node -v # 查看 npm 版本 npm -v 复制代码 如果成功打 ...

  4. spring 最权威的知识点

    1.Spring是什么? Spring是一个轻量级的IoC和AOP容器框架.是为Java应用程序提供基础性服务的一套框架,目的是用于简化企业应用程序的开发,它使得开发者只需要关心业务需求.常见的配置方 ...

  5. ResNet的个人总结

    ResNet可以说是我认真读过的第一篇paper,据师兄说读起来比较简单,没有复杂的数学公式,不过作为经典的网络结构还是有很多细节值得深究的.因为平时不太读英文文献,所以其实读的时候也有很多地方不是很 ...

  6. od快捷键

    视图.查看相关: Alt+l  记录 Alt+e 可执行模块 Alt+m 内存 Alt+c cpu(反汇编视图) Ctrl+p 补丁 Alt+k 调用堆栈 Alt+b 断点 Alt+f5 设置窗口总在 ...

  7. Jmeter socket接口测试

    一.Socket简介 什么是socket呢?我们经常把socket翻译为套接字,socket是在应用层和传输层之间的一个抽象层,它把 TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用已实现进程 ...

  8. MyBatis工程搭建&MyBatis实现Mapper配置查询

    一.MyMyBatis工程搭建 新建Maven项目:mybatis-demo 准备数据源 1 # 删除mybatis_demo数据库 2 drop database if exists mybatis ...

  9. Java学习笔记--文件IO

    简介 对于任何程序设计语言,输入和输出(Input\Output)都是系统非常核心的功能,程序运行需要数据,而数据的获取往往需要跟外部系统进行通信,外部系统可能是文件.数据库.其他程序.网络.IO设备 ...

  10. leetcode 刷题（数组篇）15题 三数之和 （双指针）

    很有意思的一道题,值得好好思考,虽然难度只有Mid,但是个人觉得不比Hard简单 题目描述 给你一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b ...