Canvas 填充,非零环绕原则,中空矩形

最新推荐文章于 2022-07-22 19:49:08 发布
最新推荐文章于 2022-07-22 19:49:08 发布
阅读量994 收藏
点赞数
分类专栏： Canvas 文章标签： canvas 填充 fill 非零环绕原则
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/79878592
版权


demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="cvs"></canvas>
    <script>

        /*
        * 非零环绕原则(填充的时候)：
        * 是用来判断哪些区域属于路径内( 计算结果非0，即为路径内 )。
        * 在路径包围的区域中，随便找一点，向外发射一条射线，
        * 和所有围绕它的边相交，
        * 然后开启一个计数器，从0计数，
        * 如果这个射线遇到顺时针围绕，那么+1，
        * 如果遇到逆时针围绕，那么-1，
        * 如果最终值非0，则这块区域在路径内。
        *
        * 备注：奇数边的区域一定在路径内。
        * */

        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');

        // 封装一个绘制矩形的函数
        function juXing( startX, startY, width, height, lineWidth, strokeStyle ) {

            ctx.moveTo( startX, startY );
            ctx.lineTo( startX + width, startY );
            ctx.lineTo( startX + width, startY + height );
            ctx.lineTo( startX, startY + height );
            ctx.closePath();

            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = strokeStyle;

            ctx.stroke();
        }

        // 顺时针画一个大矩形
        juXing( 10, 10, 100, 100, 6, 'skyblue' );

        // 逆时针画一个小矩形
        ctx.moveTo( 35, 35 );
        ctx.lineTo( 35, 55 );
        ctx.lineTo( 55, 55 );
        ctx.lineTo( 55, 35 );
        ctx.closePath();

        // 一起填充
        ctx.fill();  //中空的矩形
    </script>
</body>
</html>


houyanhua1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas — 非零环绕规则
wupiaopiao_123的专栏
06-24 1238
学习 《HTML5 Canvas 核心技术图形、动画与游戏开发》笔记 二： “非零环绕规则” 实现如下圆环效果： canvas 中可通过 beginPath() 来开始一段新的路径，如果当前路径是循环的，或者包含多个相交的子路径时，当fill()方法被调用时，canvas 绘图环境变量就会判断，应该如何对当前路径进行填充。canvas在填充那种互相有交叉的路径时，使用"非零环绕
Canvas非零环绕填充&和线相关的属性和方法&虚线、渐变色矩形、折线图
Amethyst的博客
11-13 233
文章目录绘制平行线在填充时遵循非零环绕规则和线相关的属性和方法绘制虚线绘制一个渐变色矩形绘制折线图 /* ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.stroke(); ctx.strokeStyle="blueviolet"; ctx.lineWidth=10; ctx.beginPath(); ctx.closeParh(); ctx.fill(); ctx.fillStyle="lightskyblue"; ctx.lineCap="round"; ct
canvas填充规则，非零环绕
Charlie8915的博客
02-22 192
1.看一块区域是否填充 2.从这个区域拉一条直线 3,看和这条直线相交的轨迹 4.如果顺时针轨迹+1 5.如果逆时针轨迹-1 6.所有轨迹的值计算出来 7.如果是非0，那么填充 8.如果是0那么不填充 转载于:https://www.cnblogs.com/Yanss/p/10419786.html...
非零环绕
ai125345623的博客
10-30 141
<canvas id="canvas" width="800" height="500" style="border:1px solid #666;display:block;margin:0 auto"> 当前浏览器不支持canvas，请更换浏览器后再试。 </canvas> window.onload = function(){ ...
Canvas非零环绕
weixin_40281246的博客
04-19 102
// 获取画布 var c = document.querySelector('canvas'); // 获取绘图对象 var ctx = c.getContext('2d'); // 逆时针绘制 ctx.moveTo(100, 100); ctx.lineTo(100, 300); ctx.lineTo(300, 300); ctx.lineTo(300, 100); ctx.closePat...
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
01-19
路径方向与非零环绕原则平时我们画的图形都是规规矩矩的，那么如果我们用线条画了个抽象派作品，就像下面这图一样，童鞋们知道怎么用fill()染色呢？ 这里就要用到数学上的一个方法——非零环绕原则，来判断哪块区域...
HTML5 canvas基本绘图之填充样式实现
09-27
在这个例子中，我们首先创建了两个渐变，并填充了矩形。接着，我们加载了一个图片，当图片加载完成后，使用它创建一个位图图案，并将其应用到整个canvas上。 通过熟练掌握HTML5 canvas的填充样式，开发者可以创造出...
Delphi Canvas 填充 区域 图形
10-01
标签"delphi 填充 框"强调了Canvas的填充和矩形操作。除了基本的矩形，你还可以使用其他几何形状，如椭圆、圆、多边形等。对于更复杂的填充，可以使用`FillPolygon`，`FillEllipse`，或者`FillRegion`等方法。 至于...
HTML5 Canvas中绘制矩形实例
09-28
运行这段代码后，将在Canvas上呈现一个左上角有紫色边框的矩形，边框内有一个黑色填充的小矩形，中间的20x20像素区域被清除，显示为透明。 除了这些基础方法，Canvas API 还提供了更高级的功能，如创建渐变、图案...
环形图（中空的饼状图）
01-03
环形图对于一个页面的提高，毋庸置疑，它对于项目模块来说是一个大的提升，使用户体验度更好，数据更加直观
canvas绘制矩形
编程界明世隐的博客
01-14 5953
canvas提供了三个API，分别是： 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框 strokeRect(x, y, width, height) 3.清除指定矩形区域，让清除部分完全透明 clearRect(x, y, width, height) 其中x、y是相对于画布左上角0,0 的距离，width是宽度，height设置矩形高度； 实例1 window.onload=function(){ ...
非零环绕原则
Jianxq的博客
10-17 1340
非零环绕原则​ canvas绘图中交叉路径的填充问题，依据非零环绕原则，由顺、逆时针穿插次数决定是否填充某一区域
canvas绘制线条、矩形、曲线及填充
weixin_50913764的博客
07-22 1734
​四个参数起点坐标x,y左上角坐标；lineTo会把上一次的终点作为这一次的起点,没有上一次的终点那就没有这一次的起点。8.stroke()开始绘制图形，当前路径下的所有子路经都会绘制出来；6.fill()填充区域，此时只是填充，起点和终点并没有连接起来；3.moveTo开始定义一条新的子路径，该方法确定了线段的起点；9.如果要接着绘制新的路径，记得调用beginPath()方法；4.lineTo将上面定义的线段起点和指定的新的点连接起来；1.绘制线段的API是上下文对象的方法；.........
canvas绘图原理 非零环绕原则
ITzhongzi的博客
03-07 731
HTML5学习第17篇——非零环绕
李小白的博客
12-12 416
1、非零环绕原则    非零环绕原则： 　　如果需要判断某一个区域是否需要填充颜色，就从该区域中随机的选取一个点。从这个点拉一条直线出来, 一定要拉到图形的外面. 此时以该点为圆心。看穿过拉出的直线的线段， 如果是顺时针方向就记为 +1, 如果是 逆时针方向，就记为 -1。最终看求和的结果. 如果是 0 就不填充， 如果是非零就填充。 3、非零环绕示例 示例1 代码 &lt;!DOC...
【canvas】非零环绕原则
Evan_QB的博客
12-15 529
大家都知道平时画比较规矩的线条时，都可以很明确地给其涂色，例如矩形，圆形等。 那么不规矩的图片呢 ? 当我们使用canvas进行填充颜色时，我们可以使用fill()方法进行填充，那么问题来了，那么它是怎么进行填充颜色的呢？没错，它遵循的原则就是:非零环绕原则。 那么什么是非零环绕原则？ 如图是一用一根线条画出来的颜色，我们画出其路径，我们在其中随意挑选三个点分别向任
canvas之画矩形
u011927449的博客
11-12 174
1 <canvas id="canvas" width="600" height="500" style="background-color: yellow"></canvas> 1 var c...
HTML5中canvas画图之画矩形和矩形掏空
热门推荐
花2不谢
06-10 1万+
rect方法用于绘制矩形（长方形）。其语法如下: context.rect(x，y，高度，宽度); 绘制代码如下: 绘制矩形 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //绘制 ctx.fillStyle="#ff00000"; ct

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值