微信小程序开发—(七)canvas基础

向右看齐 2021-09-12 06:22 551阅读 0赞

[一.了解canvas][._canvas]

![20170503171924335][]

canvas 标签默认宽度300px、高度225px。  
      同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作。

需要指定 canvasId，该绘图上下文只作用于对应的 `<canvas/>`

``

<view class="container"> <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> </view>

/**canvas.wxss*/ .myCanvas{ border: 1px solid #ccc; width:100%; height:250px; }

![20170503172159885][]

二.在canvas中绘制图形

(1).步骤

wxml中：

<canvas canvas-id="myCanvas" class="myCanvas" ></canvas>

1.创建一个 Canvas 绘图上下文 CanvasContext

const ctx = wx.createCanvasContext('myCanvas')

2.们来描述要在 Canvas 中绘制什么内容

ctx.setFillStyle('red')

ctx.fillRect(10, 10, 150, 75)

3.绘制

ctx.draw()

(2).代码

//canvas.js //获取应用实例 var app = getApp() Page({ onLoad: function() { const ctx = wx.createCanvasContext('myCanvas'); ctx.setFillStyle('red'); ctx.fillRect(10, 10, 150, 75); ctx.draw(); } })

(3).效果

![20170503172618515][]

[._canvas]: https://mp.weixin.qq.com/debug/wxadoc/dev/component/canvas.html
[20170503171924335]: /images/20210813/248c5e3fa5564146b66c6208a71f78ab.png
[20170503172159885]: /images/20210813/7ed686acd4374c399b2bd7298b468908.png
[20170503172618515]: /images/20210813/ef52581a2ec142958aa26ecbc379d68c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，551人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序--云开发（基础使用）

1、初始化云开发微信小程序项目创建我就不过多的废话了，大家都会操作（一定要选择不使用云服务）项目创建好就是这个样子的了 ![在这里插入图片描述][watermar

深藏阁楼爱情的钟/ 2023年01月14日 13:56/ 0 赞/ 212 阅读

相关微信小程序中的canvas

文章目录 canvas 常用属性： canvas基本用法：注意： canvas绘制基本步骤： canvas绘制笑脸： canv

灰太狼/ 2022年11月16日 01:37/ 0 赞/ 716 阅读

相关微信小程序-海报制作（canvas）

文档 [https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreen

落日映苍穹つ/ 2022年10月08日 05:40/ 0 赞/ 457 阅读

相关微信小程序开发基础

文章目录基础新建项目配置文件全局配置 app.json ⻚⾯配置 page.json

た入场券/ 2022年10月07日 00:52/ 0 赞/ 219 阅读

相关微信小程序基础

![标题图][1240] 前言什么是微信小程序，它是一种轻量级的`APP`，它与常规`App`来说，无需下载安装即可使用，它嵌于微信`App`中，要使用微信小程序你只

超、凢脫俗/ 2021年09月16日 04:06/ 0 赞/ 566 阅读

相关微信小程序开发基础

![标题图][1240] 前言：微信小程序开入入门，如果你有`html+css+javascript`的基础，那么你就很快地上手掌握的。下面提供微信小程序官方地址：[

╰半夏微凉°/ 2021年09月16日 02:38/ 0 赞/ 587 阅读

相关微信小程序开发—(十七)animation API

wx.createAnimation(object) 看官方介绍 1.创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画

￡神魔★判官ぃ/ 2021年09月12日 07:10/ 0 赞/ 411 阅读

相关微信小程序开发—(八)canvas绘制图形

[一.小知识][.] (1).API接口 ![20170504092219697][] (2).context 对象的方法列表 ![201705040922347

r囧r小猫/ 2021年09月12日 06:22/ 0 赞/ 1198 阅读

相关微信小程序开发—(七)canvas基础

[一.了解canvas][._canvas] ![20170503171924335][] canvas 标签默认宽度300px、高度225px。

向右看齐/ 2021年09月12日 06:22/ 0 赞/ 552 阅读

相关前端微信小程序云开发基础

什么是云开发云开发与传统模式的对比云开发能力介绍云开发对小程序开发的变革云开发是微信团队联合腾讯云提供的原生serverless云服务，致力于帮助更多的开

灰太狼/ 2021年07月24日 15:04/ 0 赞/ 568 阅读