`

CanvasRenderingContext2D对象的主要属性与方法

阅读更多

本文主要介绍Canvas的「画笔」工具——CanvasRenderingContext2D对象的主要属性与方法,详情请参见以下表格(其中,蓝色标注的表示常用属性或方法):

属性或方法 基本描述
canvas 当前CanvasRenderingContext2D对象实例所对应的Canvas对象
globalAlpha 定义绘制内容的透明度,取值在0.0(完全透明)和1.0(完全不透明)之间,默认值为1.0。
font 设置绘制文字所使用的字体,例如20px 宋体,默认值为10px sans-serif。该属性的用法与css font属性一致,例如italic bold 14px/30px Arial,宋体
lineWidth 定义绘制线条的宽度。默认值是1.0,并且这个属性必须大于0.0。较宽的线条在路径上居中,每边各有线条宽的一半。
lineCap 指定线条两端的线帽如何绘制。合法的值是buttroundsquare。默认值是butt。你可以点击这里查看lineCap的具体示例,以帮助你更好地理解lineCap
fillStyle 用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
shadowBlur 指定羽化阴影的程度。默认值是0。
shadowColor 把阴影的颜色指定为一个CSS字符串或Web样式字符串,并且可以包含一个alpha部分来表示透明度。默认值是black
textAlign 设置文本对齐方式。可选的值有start(内容对齐开始边界)、end(内容对齐结束边界)、left(内容向左对齐)、right(内容向右对齐)、center(内容居中对齐)。默认值为start
beginPath() 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法,它将重置内存中现有的路径。
moveTo(int x, int y) 移动画笔到指定的坐标点(x,y),该点就是新的子路径的起始点
lineTo(int x, int y) 使用直线连接当前端点和指定的坐标点(x,y)
closePath() 尝试使用直线连接当前端点和绘制路径的起始端点。如果绘制路径已经关闭(当前图形已被绘出,例如先调用了stroke()fill()等方法)或者当前绘制路径只有一个点,则它什么都不做。
stroke(int x, int y) 在Canvas中绘制出当前路径所对应的图形
fillText(string text, int x, int y[, int maxWidth]) 从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的,如果文本内容宽度超过该参数设置,则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle
strokeText(string text, int x, int y[, int maxWidth]) 从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的,如果文本内容宽度超过该参数设置,则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致,不过strokeText()绘制的文字内部是非填充(空心)的,fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle
分享到:
评论

相关推荐

    HarmonyOSOpenHarmony应用开发ArkTS画布组件CanvasRenderingContext2D对象总述

    在 HarmonyOS 和 OpenHarmony 应用开发中,Canvas 组件是用于图形绘制的重要工具,而 CanvasRenderingContext2D 是一个核心对象,它提供了丰富的接口来实现各种图形的绘制。这个对象允许开发者在 Canvas 上绘制矩形...

    HTML5 canvas基本绘图之图形组合

    2.调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;3.调用CanvasRenderingContext2D对象进行绘图。 图形组合: •globalAlpha: 设置或返回绘图的当前 alpha 或透明值 该方法主要是设置...

    HTML5 canvas基本绘图之绘制矩形

    2.调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;3.调用CanvasRenderingContext2D对象进行绘图。 绘制矩形rect()、fillRect()和strokeRect()  •context.rect( x , y , width , height...

    基于canvas 2D实现微信小程序自定义组件-环形进度条

    在HTML中,`<canvas>`元素是一个画布,我们可以使用JavaScript的`CanvasRenderingContext2D`对象在其上进行绘制。在微信小程序中,我们可以通过`wx.createSelectorQuery()`获取到canvas元素,并调用`select()`方法...

    HTML5 canvas基本绘图之绘制线段

    2. 获取CanvasRenderingContext2D对象:通过调用Canvas对象的getContext("2d")方法,我们可以获得一个CanvasRenderingContext2D对象。这个对象包含了一系列用于二维绘图的方法和属性。 3. 使用...

    HTML5Canvas_开发详解_第2版_高清完整版

    `CanvasRenderingContext2D`对象是用于绘图的主要接口,它提供了众多方法和属性,如`fillRect()`用于填充矩形,`strokeText()`用于绘制文本,`beginPath()`和`endPath()`用于定义路径,`fill()`和`stroke()`则分别...

    HarmonyOSOpenHarmony应用开发-ArkTS画布组.doc

    在本篇文章中,我们将深入探讨HarmonyOS/OpenHarmony中的ArkTS画布组件及其CanvasRenderingContext2D对象的一些关键属性:`font`, `textAlign`, 和 `textBaseline`。这些属性在绘制文本时至关重要,能够帮助开发者...

    HTML5 canvas基本绘图之绘制阴影效果

    在`CanvasRenderingContext2D`对象上进行绘图主要包括三个步骤: 1. 获取`<canvas>`元素对应的DOM对象,这通常通过`document.getElementById("canvas")`来实现,得到的是一个Canvas对象。 2. 调用Canvas对象的`...

    HTML5 canvas简洁涂鸦画板特效代码

    它的核心是`<canvas>`标签,通过JavaScript的`CanvasRenderingContext2D`对象,我们可以调用一系列方法来绘制线条、形状、图像等。 这个项目中的涂鸦画板实现,首先需要创建一个`<canvas>`元素,并设置其宽高。然后...

    HTML5 canvas基本绘图之图形变换

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。...

    HTML5 canvas基本绘图之绘制线条

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。...

    HTML5 canvas基本绘图之填充样式实现

    <canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。...

    画家算法和直线反走样的QT,Web,VC,C#,OpenGL,Java的实现

    而CanvasRenderingContext2D对象的lineWidth和lineCap属性结合antialias设置可以实现直线反走样。 3. **VC++/MFC**:在Visual C++或MFC中,可以利用GDI+或者Direct2D进行图形绘制。GDI+提供了SetWorldTransform和...

    html5画板工具

    Canvas API的核心在于两个主要对象:`canvas`元素和`CanvasRenderingContext2D`。`canvas`元素在HTML中定义了一个矩形区域,而`CanvasRenderingContext2D`则是在这个区域内进行2D绘图的上下文。 1. **canvas元素**...

    用HTML5模拟下雪

    Canvas的绘图操作主要通过两个对象完成:`CanvasRenderingContext2D`,它是绘制图形的主要接口;以及`canvas`元素本身,用于设置画布的大小和位置。 首先,开发者会在`Index.html`文件中创建一个`<canvas>`元素,并...

    html5 canvas酷炫的银河系动画特效

    2. `CanvasRenderingContext2D`对象的方法,如`arc`, `translate`, `rotate`, `drawImage`等。 3. `requestAnimationFrame`用于实现动画的平滑滚动。 4. 使用JavaScript进行动态图形生成和动画控制。 5. 图像的渐变...

Global site tag (gtag.js) - Google Analytics