小程序API能力集成指南——画布API汇总（五）

于 2024-03-07 00:15:00 发布
阅读量1k 收藏 11
点赞数 29
文章标签： 前端 javascript html iot API 小程序 apache
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ms_Smart/article/details/136399805
版权

CanvasContext

canvas 组件的绘图上下文。

方法如下（4）：

setLineWidth

CanvasContext.setLineWidth

CanvasContext.setLineWidth(number lineWidth)

功能描述

设置线条的宽度

参数

number lineWidth

线条的宽度，单位 px

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 10);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(5);
ctx.moveTo(10, 30);
ctx.lineTo(150, 30);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(10);
ctx.moveTo(10, 50);
ctx.lineTo(150, 50);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(15);
ctx.moveTo(10, 70);
ctx.lineTo(150, 70);
ctx.stroke();
 
ctx.draw();

setLineJoin

CanvasContext.setLineJoin

CanvasContext.setLineJoin(string lineJoin)

功能描述

设置线条的交点样式

参数

string lineJoin

线条的结束交点样式

lineJoin 的合法值
值说明
bevel斜角
round圆角
miter尖角

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineJoin('bevel');
ctx.setLineWidth(10);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineJoin('round');
ctx.setLineWidth(10);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineJoin('miter');
ctx.setLineWidth(10);
ctx.moveTo(130, 10);
ctx.lineTo(220, 50);
ctx.lineTo(130, 90);
ctx.stroke();
 
ctx.draw();

👉 立即开发。

setLineCap

CanvasContext.setLineCap

CanvasContext.setLineCap(string lineCap)

功能描述

设置线条的端点样式

参数

string lineCap

线条的结束端点样式

lineCap 的合法值
值说明
butt向线条的每个末端添加平直的边缘。
round向线条的每个末端添加圆形线帽。
square向线条的每个末端添加正方形线帽。

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(150, 10);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineCap('butt');
ctx.setLineWidth(10);
ctx.moveTo(10, 30);
ctx.lineTo(150, 30);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineCap('round');
ctx.setLineWidth(10);
ctx.moveTo(10, 50);
ctx.lineTo(150, 50);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineCap('square');
ctx.setLineWidth(10);
ctx.moveTo(10, 70);
ctx.lineTo(150, 70);
ctx.stroke();
 
ctx.draw();

setLineDash

CanvasContext.setLineDash

CanvasContext.setLineDash(Array.<number> pattern, number offset)

功能描述

设置虚线样式。

参数

Array.<number> pattern

一组描述交替绘制线段和间距（坐标空间单位）长度的数字

number offset 虚线偏移量

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.setLineDash([10, 20], 5);
 
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(400, 100);
ctx.stroke();
 
ctx.draw();

setMiterLimit

CanvasContext.setMiterLimit

CanvasContext.setMiterLimit(number miterLimit)

功能描述

设置最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。当 CanvasContext.setLineJoin() 为 miter 时才有效。超过最大倾斜长度的，连接处将以 lineJoin 为 bevel 来显示。

参数

number miterLimit

最大斜接长度

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(1);
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(2);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(3);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();
 
ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(4);
ctx.moveTo(130, 10);
ctx.lineTo(220, 50);
ctx.lineTo(130, 90);
ctx.stroke();
 
ctx.draw();

👉 立即开发。

fillText 

CanvasContext.fillText

CanvasContext.fillText(string text, number x, number y, number maxWidth)

功能描述

在画布上绘制被填充的文本

参数

string text

在画布上输出的文本

number x

绘制文本的左上角 x 坐标位置

number y

绘制文本的左上角 y 坐标位置

number maxWidth

需要绘制的最大宽度，可选

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(10, 10, 150, 75);
ctx.draw();

setFontSize

CanvasContext.setFontSize

CanvasContext.setFontSize(number fontSize)

功能描述

设置字体的字号

参数

number fontSize

字体的字号

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.setFontSize(20);
ctx.fillText('20', 20, 20);
ctx.setFontSize(30);
ctx.fillText('30', 40, 40);
ctx.setFontSize(40);
ctx.fillText('40', 60, 60);
ctx.setFontSize(50);
ctx.fillText('50', 90, 90);
 
ctx.draw();

setTextAlign

CanvasContext.setTextAlign

CanvasContext.setTextAlign(string align)

功能描述

设置文字的对齐

参数

string align

文字的对齐方式

align 的合法值
值说明
left左对齐
center居中对齐
right右对齐

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.setStrokeStyle('red');
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
 
ctx.setFontSize(15);
ctx.setTextAlign('left');
ctx.fillText('textAlign=left', 150, 60);
 
ctx.setTextAlign('center');
ctx.fillText('textAlign=center', 150, 80);
 
ctx.setTextAlign('right');
ctx.fillText('textAlign=right', 150, 100);
 
ctx.draw();

setTextBaseline

CanvasContext.setTextBaseline

CanvasContext.setTextBaseline(string textBaseline)

功能描述

设置文字的竖直对齐

参数

string textBaseline

文字的竖直对齐方式

textBaseline 的合法值
值说明
top顶部对齐
bottom底部对齐
middle居中对齐
normal居中对齐

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.setStrokeStyle('red');
ctx.moveTo(5, 75);
ctx.lineTo(295, 75);
ctx.stroke();
 
ctx.setFontSize(20);
 
ctx.setTextBaseline('top');
ctx.fillText('top', 5, 75);
 
ctx.setTextBaseline('middle');
ctx.fillText('middle', 50, 75);
 
ctx.setTextBaseline('bottom');
ctx.fillText('bottom', 120, 75);
 
ctx.setTextBaseline('normal');
ctx.fillText('normal', 200, 75);
 
ctx.draw();

👉 立即开发。

IoT砖家涂拉拉
关注
  • 29
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Canvas画布详解API代码演示
谢谢你的关注
12-19 934
标签：画布标签，本身不具备绘图能力，可以通过脚本(JS)来实现width:设置画布宽度，默认为300pxheight:设置画布高度，默认为150pxCanvas API：提供通过JavaScript在上绘图的功能 – 动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面Canvas API主要实现2D效果，3D需要由WebGL API实现。
小程序API能力集成指南——画布API汇总（一）
最新发布
IoT砖家
03-05 1163
添加颜色的渐变点。小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染
微信小程序仪表盘
u010855711的博客
03-27 1031
wxml文件中布局 <viewclass="view-main1-canvas"> <viewclass="view-canvas"> <canvasclass="progress_bg"canvas-id="canvasProgressbg"></canvas> <canvasclass="progress_text"canvas-id="can...
Canvas API（画布）简介
weixin_58280614的博客
06-21 458
一、使用画布必需要写的 （1）获取画布： （2）规定绘图方法： （1）canvas画布默认宽高为300*150，不可在css中修改，可直接在canvas标签中添加width，height属性设置画布宽高 （2）清除画布的使用： （3）绘制弧线时角度用Π来表示...
javaFX学习之canvas画布api简单介绍（转载）
zy103118的博客
12-28 2041
原文链接：DOC-02-09 使用Canvas API | JavaFX中文资料
微信小程序——画布：时钟（截图+源码）.zip
04-17
微信小程序——画布：时钟（截图+源码）.zip 微信小程序——画布：时钟（截图+源码）.zip 微信小程序——画布：时钟（截图+源码）.zip 微信小程序——画布：时钟（截图+源码）.zip 微信小程序——画布：时钟（截图+...
微信小程序canvas画布实现画笔自由绘制
01-09
在微信小程序中，canvas画布是一个非常重要的组件，它允许...总的来说，微信小程序的canvas画布功能提供了丰富的绘图能力，通过监听触摸事件并结合canvas API，我们可以实现自由绘制的功能，为用户提供有趣的交互体验。
小程序源码 画布：时钟 (代码+截图)
06-19
小程序源码 画布：时钟 (代码+截图)小程序源码 画布：时钟 (代码+截图)小程序源码 画布：时钟 (代码+截图)小程序源码 画布：时钟 (代码+截图)小程序源码 画布：时钟 (代码+截图)小程序源码 画布：时钟 (代码+截图)小...
微信小程序 canvas API详解及实例代码
09-01
在实践中，了解和掌握微信小程序Canvas API的详细用法，能够极大地提升你在小程序中构建交互式和视觉丰富用户体验的能力。通过不断地学习和实践，你可以创建出极具吸引力的图形界面，提升用户对小程序的满意度和使用...
微信小程序canvas画布绘制矩形、椭（圆）、直线、文字
01-09
本文将深入探讨如何使用Canvas API在微信小程序中绘制矩形、椭圆、直线以及添加文字。 首先，我们需要在小程序的页面JSON配置文件中引入Canvas组件，并在对应的WXML文件中进行布局。例如： ```json { "component...
HTML5画布元素canvas提供的API使用方法
网站建设之路
07-11 3377
Html5画布元素canvas提供操作布局和画布元素呈现的属性和方法的接口。Html5画布元素canvas接口也继承了HtmlElement接口的属性和方法
【初识HTML5】(3) : 画布常用的API (1)
Sam走起
02-12 689
本文申明：为了节省时间，Sam偷了个小懒, 大部分例子来源网络，主要是为了方便演示。1.矩形相关clearRect(double x, double y, double w, double h) 清除指定方形区域的像素 x 要清除的矩形左上角的 x 坐标 y 要清除的矩形左上角的 y 坐标 w 要清除的矩形的宽度，以像素计 h要清除的矩形的高度，以像素计<script> var
javaFX初探（使用画布 API）
热门推荐
貌似君子的专栏
01-26 2万+
本章介绍javaFX画布API的使用。 概述 javaFX  画布API提供了自定义的纹理。画布API有两个主要的类，Canvas 和 GraphicsContext,定义在javafx.scene.canvas包下。我们可 以创建一个Canvas对象，燃火获得它的GraphicsContext，然后渲染我们自定义的形状。因为Canvas是Node的子类，所以我们可以在场景图 中使用。
【初识HTML5】(3) : 画布常用的API (3)
Sam走起
02-15 425
我们把其他的常用API一起GO OVER一下吧。 6.曲线相关arcTo(double x1, double y1,double x2, double y2, double radius)使用使用切点和一个半径，来为当前子路径添加一条圆弧。 x1, y1 点 P1 的坐标。 x2, y2 点 P2 的坐标。 radius 定义圆弧的圆的半径。var canvas = document.getE
Canvas常用API
qq_35592743的博客
06-24 415
Canvas介绍 画布，通过画笔绘制几何图形、文本、路径、位图等。常用API分为：绘制、变换、保存状态、恢复。 Canvas API 绘制。 1.1 drawBitmap(Bitmap bitmap, float left, float top, Paint paint);在指定坐标绘制位图。 1.2 drawLine(float startX, float startY, float stop...
gojs常用API-画布操作
pdw2009的专栏
10-09 7385
画布 获取当前画布的json myDiagram.model.toJson(); 加载json刷新画布 myDiagram.model = go.Model.fromJson(model); 删除选中节点或线 myDiagram.commandHandler.deleteSelection(); 获取选中的节点或线 myDiagram.selecti...
HTML5 Canvas API详解
weixin_34302798的博客
02-10 346
HTML5 是一个新兴标准，它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性，它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性，它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现，等等。本文主要关注图...
第24篇 画布元素 之 便捷的接口（API）
Fanjufei的博客
02-10 450
1、画布元素（Canvas） qt5中引入画布元素，提供绘制图形，制作游戏，或者其它动态元素。 基本思想：使用一个2D对象来渲染路径，这个2D对象包括了必要的绘制函数，画布元素充当绘制画布。 例1：绘制矩形 import QtQuick 2.9 import QtQuick.Window 2.2 Window { visible: true width: 600 height: 400 Canvas { id: canvas wi
Part Four 画布API
苦涩精灵的博客
05-02 174
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <scr...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IoT砖家涂拉拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值