06-canvas填充图形颜色
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>06-Canvas填充图形</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 canvas{
12 display: block;
13 margin: 0 auto;
14 background: red;
15 }
16 </style>
17 </head>
18 <body>
19 <canvas width="500" height="500"></canvas>
20 <script>
21 /*
22 1.stroke
23 绘制已定义的路径
24
25 2.fill
26 填充已定义的路径
27 */
28 let oCanvas = document.querySelector("canvas");
29 let oCtx = oCanvas.getContext("2d");
30 /*
31 oCtx.moveTo(50, 50);
32 oCtx.lineTo(200, 50);
33 oCtx.lineTo(200, 200);
34 oCtx.closePath();
35 // oCtx.stroke();
36 oCtx.fillStyle = "blue";
37 oCtx.fill();
38 */
39 oCtx.moveTo(100, 100);
40 oCtx.lineTo(300, 100);
41 oCtx.lineTo(300, 300);
42 oCtx.lineTo(100, 300);
43 oCtx.closePath();
44 // oCtx.stroke();
45
46 // oCtx.beginPath();
47 /*
48 oCtx.moveTo(150, 150);
49 oCtx.lineTo(250, 150);
50 oCtx.lineTo(250, 250);
51 oCtx.lineTo(150, 250);
52 */
53 oCtx.moveTo(250, 150);
54 oCtx.lineTo(150, 150);
55 oCtx.lineTo(150, 250);
56 oCtx.lineTo(250, 250);
57
58 oCtx.closePath();
59 /*
60 注意点: 只要没有手动开启新的路径, 那么使用的都是默认路径
61 如果都是默认路径, 那么设置的样式在同一个路径中都是有效的
62 * */
63 // oCtx.strokeStyle = "blue";
64 // oCtx.stroke();
65 oCtx.fillStyle="blue";
66 oCtx.fill();
67 /*
68 对于同一路径,在填充的时候回遵循非零环绕规则
69 从当前的区域拉出一条直线, 遇到顺时针相交的线就+1, 遇到逆时针相交的线就-1
70 最终计算的结果如何是0就不填充, 如果不是0就填充
71 * */
72 </script>
73 </body>
74 </html>
06-canvas填充图形颜色的更多相关文章
- HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas给图形添加颜色
canvas给图形添加颜色 合法属性 ctx.fillStyle = 'orange'; ctx.fillStyle = '#FFA500'; ctx.fillStyle = 'rgb(255, 16 ...
- HTML5—canvas绘制图形（1）
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- canvas 绘制图形
canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...
- HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版
HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...
- Canvas 线性图形（一）：路径
路径的概念 路径是从起始点到结束点之间的连线.个人认为,二维画布中分为线性图形和非线性图形,线性图形包括矩形.直线.曲线.圆形等各种几何图形:非线性图形包括图象.文本.像素.线性图形中又分为路径和非路 ...
- 使用Canvas绘制图形的基本教程
原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...
- HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...
- canvas基础—图形变换
1.canvas转换方法 1.1canvas转换方法 二.canvas实现图形的中心点旋转 step1:获取canva元素并指定canvas的绘图环境 var canvas=document.getE ...
随机推荐
- 随机二次元图片API第二弹
Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 随机二次元图片API第二弹 日期:2018-3-4 阿珏 ...
- Rust性能分析之测试及火焰图，附(lru,lfu,arc)测试
性能测试,在编写代码后,单元测试及性能测试是重要的验收点,好的性能测试可以让我们提前发现程序中存在的问题. 测试用例 在Rust中,测试通常有两部分,一部分是文档测试,一部分是模块测试. 通常我们在函 ...
- WPF Canvas在Image 图像上绘图,自适应缩放.
效果如图 实现了绘图,自适应缩放 核心代码如下 <Window.InputBindings> <KeyBinding Key="Z" Modifiers=&quo ...
- 从 Docker Hub 拉取镜像受阻？这些解决方案帮你轻松应对
最近一段时间 Docker 镜像一直是 Pull 不下来的状态,感觉除了挂,想直连 Docker Hub 是几乎不可能的.更糟糕的是,很多原本可靠的国内镜像站,例如一些大厂和高校运营的,也陆续关停了, ...
- MAC10.12Caps Lock失灵
先说一下小弟的MAC系统是黑苹果来的,笔记本并没有那个显示大小写的指示灯,所以一开始的时候一直以为自己的键盘坏了还特意换了一个(结果质量比原来的更差),输入密码因为有大小写经常被提示密码错误所以蛋疼得 ...
- Linux OpenGrok搭建
目录 一.目的 二.环境 三.相关概念 3.1 OpenGrok 3.2 CTags 3.3 Tomcat 四.OpenGrok搭建 4.1 安装jdk 4.2 安装ctags依赖 4.3 安装uni ...
- 个人网站接入Google Ads的一点心得
前言 前段时间花了一些精力尝试和摸索主题接入 Google Ads 的问题,算是阶段性成功了吧,这次简单分享一下,如果有缘看到这篇文章,应该会有些启发. 1. 展示效果 上篇文章说到,前两天我在我的两 ...
- 【论文阅读】Pylot: A Modular Platform for Exploring Latency-Accuracy Tradeoffs in Autonomous Vehicles
参考与前言 resource 代码:https://github.com/erdos-project/pylot 论文地址:https://www.ionelgog.org/data/papers/2 ...
- Windows 10 LTSC中个人版OneDrive失效的问题
该问题是由于LTSC注册表无onedriver的id{A52BBA46-E9E1-435f-B3D9-28DAA648C0F6}定义导致,解决方案是新建一个reg_onedrive.reg文件,并编辑 ...
- SQL查询语句汇总
SQL查询语句汇总 students表 id class_id name gender score 1 1 小明 M 90 2 1 小红 F 95 class表 id name 1 一班 2 二班 3 ...