为什么当线宽很宽时填充会有阴影区域
来源：3-9 填充与描边
WittChen
2020-05-23 09:00:53
问题一，为什么会有阴影区
问题二、我画了一个长宽为 100*200的矩形，我设置线宽为10，那么这个图形的实际占的面积是100*200吗
写回答
2回答
-
同学你好，解答如下：
（1）因为设置了透明度，所以填充到边线之间的过渡出现了阴影。可以将不透明度设置为1：
（2）实际的宽高应该是100*200，即没有加上线宽，测试：
边线的部分是重叠的，说明没有实际占据位置。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-05-23 -
WittChen
提问者
2020-05-23
试验效果，当做笔记<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <!-- 创建一个画布 --> <canvas class="test-canvas" width="1000" height="1000"> 如果浏览器兼容会显示该字段 </canvas> <script> // 拿到这个画布 var my_canvas = document.getElementsByClassName("test-canvas")[0]; // 拿到画布的上下文,因为要操作画布，那么必须得通过上下文去操作 var ctx = my_canvas.getContext("2d"); ctx.lineWidth = 50; ctx.strokeRect(100,100,100,100); ctx.strokeRect(200,100,100,100); ctx.lineWidth = 1; ctx.strokeRect(350,100,100,100); ctx.strokeRect(450,100,100,100); </script> </body> </html>0
相似问题