canvas-颜色和样式

颜色

fillStyle = color

设置图形的填充颜色。

strokeStyle = color

设置图形轮廓的颜色。

color可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象,默认情况下,线条和填充颜色都是黑色(CSS 颜色值#000000)。


透明度

globalAlpha = transparencyValue

这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。

或者:

// 指定透明颜色,用于描边和填充样式

ctx.strokeStyle="rgba(255,0,0,0.5)";

ctx.fillStyle="rgba(255,0,0,0.5)";


线性

lineWidth = value

设置线条宽度。

lineCap = type

设置线条末端样式。

lineJoin = type

设定线条与线条间接合处的样式。

miterLimit = value

限制当两条线相交时交接处最大长度;所谓交接处长度(斜接长度)是指线条交接处内角顶点到外角顶点的长度。

getLineDash()

返回一个包含当前虚线样式,长度为非负偶数的数组。

setLineDash(segments)

设置当前虚线样式。

lineDashOffset = value

设置虚线样式的起始偏移量

推荐阅读更多精彩内容

  • 使用样式和颜色 色彩 colors 如果想要给图形上色,有两个重要的属性可以做到:fillStyle 和 stro...
    闲不住的李先森阅读 704评论 0 0
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,003评论 3 40
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 3,876评论 2 29
  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 6,753评论 1 3
  • 初初来的秋 突然间的夜 放空自己,望一眼窗外 楼与楼的距离太近 多久以前?不久以前 还期待着谁家表妹突然间能够回头...
    bb53503536bd阅读 70评论 0 1
  • 。我早已经忘记,不是一个人时的感受。
    井底的动物阅读 88评论 0 0
  • 抽象类的成员特点: 成员变量:既可以是变量,也可以是常量。构造方法:用于子类访问父类数据的初始化。成员方法:既可以...
    frankisbaby阅读 293评论 0 0