一、问题发现

当我在用html5新元素<canvas>实现与sv

g同样的效果（画一个带5px轮廓线，宽为200，高为100的矩形）时，发现canvas画出的矩形与svg整体大小相同，但是轮廓线较窄。如下图：

二、原因

由图可知，靠近轮廓线的位置有一圈更深的颜色，这是原廓形线与填充颜色叠加的效果（原轮廓线为粉色，填充颜色为透明度为0.5的蓝色），可以知道此时的填充颜色在上方，轮廓线在下方，有一部分重叠改变了颜色。

三、解决问题

先填充颜色，后画轮廓线。JavaScript代码如下：

var b = document.getElementById("myCanvas2");var btx = b.getContext("2d");// 画矩形btx.rect(50,20,200,100);// 设置线宽为5pxbtx.lineWidth = "5";// 设置轮廓线颜色btx.strokeStyle = "rgba(255,192,203)";// 设置填充颜色btx.fillStyle = "rgba(0,0,255,0.5)";// 先填充颜色btx.fill();// 后画轮廓线btx.stroke();// 显示CANVAS文字btx.fillStyle = "white";btx.font = "16px Arial"btx.fillText("CANVAS",115,80);

修改后svg与canvas显示效果一致：

canvas设置lineWidth属性，出现线条被fill覆盖问题。相关推荐

php网页画线,HTML5 canvas基本绘图之绘制线条
是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制线条方法,感兴趣的小伙伴们可以参考一下是HTML5中新增的标签,用于绘制图形,实际上,这个标 ...
canvas设置颜色及线条样式
canvas设置颜色及线条样式 1. canvas设置颜色 2. canvas设置线条样式 1. canvas设置颜色 fillStyle = color; //设置图形的填充颜色 strokeSty ...
matlab常用的设置，坐标系、线条颜色、线型，字体、属性
一.坐标系 1)定义坐标范围:一般MATLAB自动定义坐标范围,如用户认为设定的不合适,可用:axis([Xmin, Xmax, Ymin, Ymax]) 来重新设定; 2) 坐标轴控制:MATLA ...
Silverlight学习笔记三(鼠标点击动态画直线|动态设置Ellipse的Canvas.Top与Canvas.Left|动态设置Stroke属性的方法。)...
我有可能需要把AutoCAD的部分功能搬到浏览器上,先练习一下画直线的方法.如图: MainPage.xaml代码: 大气象 <UserControl x:Class="DrawLin ...
便利贴--12{酷炫背景，小球随鼠标移动，可自由设置小球属性}
便利贴--12{酷炫背景,小球随鼠标移动,可自由设置小球属性} html 资源下载 0积分 html 之前做的拿出来分享下 <!DOCTYPE html> <html>< ...
Canvas设置样式无效导致圆变成椭圆的问题研究剖析
Canvas设置样式无效导致圆变成椭圆的问题研究剖析,如下面代码段. <!DOCTYPE html> <html lang="en"> <head&g ...
如何在AngularJS的ng-options中设置value属性？
本文翻译自:How do I set the value property in AngularJS' ng-options? Here is what seems to be bothering a ...
python中mainloop添加背景_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...
ugui unity3d 仪表盘_Unity3D---UGUI---UI创建以及Canvas设置
1.创建场景使用快捷键以及鼠标点击都可 QQ截图20180127105022.png 2.Image创建最简单的先创建一个Image 在Hierarchy窗口里的空白处右键点击>>UI ...
python设置背景图片大全_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...

canvas设置lineWidth属性，出现线条被fill覆盖问题。

一、问题发现

二、原因

三、解决问题

canvas设置lineWidth属性，出现线条被fill覆盖问题。相关推荐

最新文章

热门文章