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

最新推荐文章于 2024-08-28 00:00:00 发布
最新推荐文章于 2024-08-28 00:00:00 发布
阅读量1.2k 收藏 24
点赞数 35
文章标签： 小程序 apache java iot API 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ms_Smart/article/details/136399565
版权
本文详细介绍了HTML5CanvasAPI中的CanvasContext对象及其主要方法，如arc用于绘制弧线，rect和arcTo用于创建矩形和圆弧路径，fill和stroke用于填充和描边，以及closePath用于封闭路径。通过实例代码展示了这些方法的使用和效果。
摘要由CSDN通过智能技术生成

CanvasContext

canvas 组件的绘图上下文。

方法如下（2）：

arc

CanvasContext.arc

CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)

功能描述

创建一条弧线。

  • 创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI。
  • 用 stroke 或者 fill 方法来在 canvas 中画弧线。

参数

number x

圆心的 x 坐标

number y

圆心的 y 坐标

number r

圆的半径

number sAngle

起始弧度，单位弧度（在 3 点钟方向）

number eAngle

终止弧度

boolean counterclockwise

弧度的方向是否是逆时针

示例代码

 <canvas canvas-id="myCanvas" style="border: 1px solid;"/>
const ctx = ty.createCanvasContext('myCanvas');
 
// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.setFillStyle('#EEEEEE');
ctx.fill();
 
ctx.beginPath();
ctx.moveTo(40, 75);
ctx.lineTo(160, 75);
ctx.moveTo(100, 15);
ctx.lineTo(100, 135);
ctx.setStrokeStyle('#AAAAAA');
ctx.stroke();
 
ctx.setFontSize(12);
ctx.setFillStyle('black');
ctx.fillText('0', 165, 78);
ctx.fillText('0.5*PI', 83, 145);
ctx.fillText('1*PI', 15, 78);
ctx.fillText('1.5*PI', 83, 10);
 
// Draw points
ctx.beginPath();
ctx.arc(100, 75, 2, 0, 2 * Math.PI);
ctx.setFillStyle('lightgreen');
ctx.fill();
 
ctx.beginPath();
ctx.arc(100, 25, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
 
ctx.beginPath();
ctx.arc(150, 75, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();
 
// Draw arc
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
ctx.setStrokeStyle('#333333');
ctx.stroke();
 
ctx.draw();

针对 arc(100, 75, 50, 0, 1.5 * Math.PI)的三个关键坐标如下：

  • 绿色: 圆心 (100, 75)
  • 红色: 起始弧度 (0)
  • 蓝色: 终止弧度 (1.5 * Math.PI)

👉 立即开发。

rect

CanvasContext.rect

CanvasContext.rect(number x, number y, number width, number height)

功能描述

创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形真正的画到 canvas 中

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

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

arcTo

CanvasContext.arcTo

CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)

功能描述

根据控制点和半径绘制圆弧路径。

参数

number x1

第一个控制点的 x 轴坐标

number y1

第一个控制点的 y 轴坐标

number x2

第二个控制点的 x 轴坐标

number y2

第二个控制点的 y 轴坐标

number radius

圆弧的半径

fillRect

CanvasContext.fillRect

CanvasContext.fillRect(number x, number y, number width, number height)

功能描述

填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

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

strokeRect

CanvasContext.strokeRect

CanvasContext.strokeRect(number x, number y, number width, number height)

功能描述

画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色，如果没设置默认是黑色。

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

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

👉 立即开发。

clearRect

CanvasContext.clearRect

CanvasContext.clearRect(number x, number y, number width, number height)

功能描述

清除画布上在该矩形区域内的内容

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

clearRect 并非画一个白色的矩形在地址区域，而是清空，为了有直观感受，对 canvas 加了一层背景色。

<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>
const ctx = ty.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(0, 0, 150, 200);
ctx.setFillStyle('blue');
ctx.fillRect(150, 0, 150, 200);
ctx.clearRect(10, 10, 150, 75);
ctx.draw();

fill

CanvasContext.fill

CanvasContext.fill()

功能描述

对当前路径中的内容进行填充。默认的填充色为黑色。

示例代码

如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充。

const ctx = ty.createCanvasContext('myCanvas');
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.fill();
ctx.draw();

fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去。

stroke

CanvasContext.stroke

CanvasContext.stroke()

功能描述

画出当前路径的边框。默认颜色色为黑色。

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.stroke();
ctx.draw();

stroke() 描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去。

const ctx = ty.createCanvasContext('myCanvas');
// begin path
ctx.rect(10, 10, 100, 30);
ctx.setStrokeStyle('yellow');
ctx.stroke();
 
// begin another path
ctx.beginPath();
ctx.rect(10, 40, 100, 30);
 
// only stoke this rect, not in current path
ctx.setStrokeStyle('blue');
ctx.strokeRect(10, 70, 100, 30);
 
ctx.rect(10, 100, 100, 30);
 
// it will stroke current path
ctx.setStrokeStyle('red');
ctx.stroke();
ctx.draw();

closePath

CanvasContext.closePath

CanvasContext.closePath()

功能描述

关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();
ctx.draw();

👉 立即开发。

IoT砖家涂拉拉
关注
微信小程序canvas2D全新API介绍
前端彭于晏的博客
12-10 1万+
微信小程序canvas2D介绍 前言 微信小程序官方在2.9.0开始支持了一个canvas 2D的新API，之前的API不再进行维护，因此之后使用canvas的项目，都建议使用canvas 2D来绘制。 那么新的canvas2D API有啥好处呢？ 全面支持源生H5 JS的写法，迁移H5代码更容易，学习成本更低 性能上的优化和提升，复杂动画上帧数明显 BUG修复，以及一些不支持的条件完善 简介 获取canvas节点 <canvas type='2d' id='canvas'></can
小程序的学习资料收集
weixin_30414245的博客
02-23 3111
收集学习资料 1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3：设计指南：https://mp.weixin.qq.com/debug/wxadoc/desig...
微信小程序 canvas API详解及实例代码
09-01
主要介绍了微信小程序 canvas API详解及实例代码的相关资料,需要的朋友可以参考下
微信小程序把玩（四十一）canvas API
热门推荐
FUCK
10-04 2万+
绘图是每个移动应用必备的技术，基本上和Android，IOS，ReactNative，等移动开发都是相同的，创建个上下文，给你个画布再上画，这里的属性参数比较多就分开看了，想深入研究那就看自己的了。。。屏幕就像是数学上的坐标轴，且在第四象限，以屏幕左上角为圆点，X轴向右为正向左为负，Y轴向下为正向上为负（这点和数学上相反的）以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法微
小程序开发框架 —— 框架接口汇总（五）
最新发布
IoT砖家
08-28 1011
渲染脚本，可用于处理高频的绘图需求，可以提高视图的动画渲染性能。文件名后缀为.rjs, 提供Render()函数进行声明一个渲染脚本模块，与页面或组件结合使用。主要应用场景 canvas 图表渲染，webGL 图形渲染等。
微信小程序Canvas绘图API
abs625的博客
08-31 2万+
微信小程序Canvas绘图API前言使用姿势常用API（以下API都是通过CanvasContext对象进行调用）颜色、样式setFillStyle(string|CanvasGradient color)fill()setStrokeStyle(string color)stroke矩形rect(number x, number y, number width, number height)fi...
微信小程序canvas 常用api
web修理工
05-21 281
<canvas canvas-id="canvasId" id="canvas" style="width:300px;height:400px"></canvas> onReady: function() { const ctx = wx.createCanvasContext('canvasId'); const query = wx.createSelectorQuery().select('#canvas').boundingClientRect(res
期末考试题库2
m0_74487105的博客
09-20 1806
62.下面哪一个是属于Spark的分布式图处理框架？（A） A:GraphX B:Dremel C:Impala D:DStream 解析：Spark的GraphX支持图计算的库，支持丰富的图计算的算子，包括属性算子、结构算子、Join算子和邻居聚合等。 https://help.aliyun.com/document_detail/441938.html 63.通过日志规则设置，可以对业务系统中对用户的哪些数据进行采集？（C） A:图片和评论 B:音频信息和视频信息 C:用户使用
表格
xiao22325的博客
11-11 1264
首页博客学院 下载论坛图文课问答商城活动专题招聘ITeyeGitChat APP VIP会员续费8折 疯狂Python精讲 写博客 3 原创 HTML 表格元素 2017-10-09 16:08:13 xiaoxiaobukuang 阅读数 375更多 分类专栏： HTML5 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：htt...
大数据总结
cdmazzq的博客
11-26 3457
Hadoop 学习 1.hvie 不是一个完整的数据库，其中最大的限制是hive不支持记录级别的更新，插入，删除。但是用户可以通过查询生成新表或者将查询结果导入到文件中 PYTHON学习 可以把模块想像成导入到python以增强其功能的扩展。需要使用命令import来导入块。 例子：>>>import math >>>math.floor(23.6) ...
微信小程序canvas2D全新API介绍，万字解析
2401_84094979的博客
04-06 835
)
canvas绘图API
weixin_55711841的博客
08-24 399
canvas绘图API
canvas绘制文本
weixin_43269800的博客
02-14 1896
canvas中绘制文本 canvas 提供了两种方法来渲染文本: fillText(text, x, y) 在指定的(x,y)位置填充指定的文本； strokeText(text, x, y) 在指定的(x,y)位置绘制文本边框； 代码示例： ctx.fillText("无悟饭空",100,100); ctx.strokeText("无悟饭空",100,100); 文本样式 font ...
小程序ctx.draw()安卓上不执行，点击无反应，微信开发者工具和苹果上可以
weixin_59803648的博客
09-24 1371
小程序ctx.draw()安卓上不执行，点击无反应，微信开发者工具和苹果上可以
小程序绘制之CanvasContext
软考鸭
08-19 6147
一、全局 1、draw CanvasContext.draw(boolean reserve, function callback) reserve:本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。 绘制完成后执行的回调函数 示例： const ctx = wx.createCanvasC
JavaScript 之 canvas（四）-- 绘制文字
一只小鹰
10-03 2万+
本文原文地址：https://www.jeremyjone.com/485/， 转载请注明，谢谢。 基本概念 在canvas中，为我们提供了一个非常方便的添加文字的方法，直接上 w3school 的文档说明： context.fillText(text,x,y,maxWidth); // text: 规定在画布上输出的文本。 // x: 开始绘制文本的 x 坐标位置（相对于画布）。 // y:...
小程序 canvas注意事项（3）draw
旸君颜的博客
09-20 4343
如果在画图完成后，有对应操作时，必须在draw的callback后执行，比如图片预览、改变画布大小等 ctx.draw(false, function() { console.log('后续操作'); })
Uniapp 小程序自定义组件 开发 Canvas 画布 生成图片 调用 ctx.draw 无反应 回调不执行 解决方法
奋斗在前端的实习生
01-06 1005
Uniapp 小程序自定义组件Canvas生成图片ctx.draw 无反应回调不执行解决方法
Canvas知识点之三
ZLJ925的博客
09-06 576
1.ctx.drawImage的三种方式，要在img.onload ＝ function(){}中使用。 <canvas id="cvs" width="500" height="500"></canvas> <img src="./imgs/example.jpg"> <script> var cvs = document.getElementById('cvs')
微信小程序怎么用canvas绘制笑脸
05-23
可以使用以下步骤在微信小程序中使用Canvas绘制笑脸： 1. 在wxml文件中添加canvas标签，设置canvas的id和宽高： ```html <canvas id="myCanvas" style="width: 300px; height: 300px;"></canvas> ``` 2. 在js文件中获取到canvas对象，设置绘图上下文： ```javascript const ctx = wx.createCanvasContext('myCanvas') ``` 3. 绘制一个圆形的笑脸： ```javascript // 绘制圆形 ctx.beginPath() ctx.arc(150, 150, 100, 0, 2 * Math.PI) ctx.stroke() // 绘制笑脸弧线 ctx.beginPath() ctx.arc(150, 150, 80, 0.5 * Math.PI, 1.5 * Math.PI) ctx.stroke() // 绘制笑脸眼睛 ctx.beginPath() ctx.arc(110, 110, 10, 0, 2 * Math.PI) ctx.arc(190, 110, 10, 0, 2 * Math.PI) ctx.fill() // 绘制笑脸嘴巴 ctx.beginPath() ctx.arc(150, 170, 50, 0, Math.PI) ctx.stroke() ``` 4. 最后调用draw方法将绘制的图形显示在canvas上： ```javascript ctx.draw() ``` 完成以上步骤，就可以在微信小程序中使用Canvas绘制笑脸了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

IoT砖家涂拉拉

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

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

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

打赏作者

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

抵扣说明：

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

余额充值