canvas填充和描边介绍

：点上面关注免费学习前端知识！

2D上下文的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。大多数2D上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性： fillStyle 和strokeStyle 。

这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是 “#000000” 。如果为它们指定表示颜色的字符串值，可以使用CSS中指定颜色值的任何格式，包括颜色名、十六进制码、 rgb 、 rgba 、 hsl 或 hsla 。举个例子：

var drawing = document.getElementById(“drawing”);

//确定浏览器支持<canvas>元素

if (drawing.getContext){

var context = drawing.getContext(“2d”);

context.strokeStyle = “red”;

context.fillStyle = ”#0000ff”;

}

以上代码将 strokeStyle 设置为red（CSS中的颜色名），将 fillStyle 设置为#0000ff（蓝色）。然后，所有涉及描边和填充的操作都将使用这两个样式，直至重新设置这两个值。如前所述，这两个属性的值也可以是渐变对象或模式对象。作者后面会讨论这两种对象。

canvas填充和描边介绍相关推荐

php gd 描边,HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实现纹理填充与描边. 一:颜色填充与描边 ...
java canvas 描边,HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实现纹理填充与描边. 一:颜色填充与描边颜色填充可以通过fillStyle来实现,描边颜色可以通过strokeSt ...
java polygon描边_SVG基础——填充和描边
过去几周我讲解了可缩放矢量图形(SVG)的一些基础知识.首先,我展示了如何在HTML中嵌入SVG,接着讲解了如何创建SVG预定义的基础图形. 为了让创建的图形显示出来,我在这两篇文章中都使用了填充和描 ...
canvas填充规则
canvas填充规则 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d');ctx ...
canvas路径，描边与填充
1 canvas中有两个可以用来实现立即绘图的方法. fillRect()和 strokeRect()方法. 2 路径有开放路径和封闭路径.其中,rect()方法创建的路径是封闭的,arc()方法创建 ...
Canvas 填充渐变
Canvas的渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色. 注意:使用渐变必须使用两种或两种以上的颜色. Canvas渐变有两种方法: 线性渐变 createL ...
机器学习原来这么有趣！第二章：用机器学习制作超级马里奥的关卡
第一章:全世界最简单的机器学习入门指南 https://blog.csdn.net/wskzgz/article/details/89917343 第二章:用机器学习制作超级马里奥的关卡 https: ...
html5 Canvas画图4：填充和渐变
一般绘图的方式有两种,即填充和描边,前面的文章已经讲了描边的方法stroke,本文就讲一下Canvas中填充图形的方法. 填充即fill(),很直白吧?而且和strokeStyle表示描边样式一样,f ...
PS，路径无法描边或填充？
可以是下面的原因 http://www.ittribalwo.com/article/2357.html 正确操作方法: 路径要转化为形状,才可以填充.描边 1.选择路径(Ctrl+Alt+鼠标框选) ...

canvas填充和描边介绍

canvas填充和描边介绍相关推荐

最新文章

热门文章