下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
【移动应用开发技术】微信小程序中canvas有什么用
这篇文章给大家分享的是有关微信小程序中canvas有什么用的内容。在下觉得挺实用的,因此分享给大家做个参考,一起跟随在下过来看看吧。
canvas元素用于在网页上绘制图形。HTML5的canvas元素使用JavaScript在网页上绘制2D图像。本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家。一.了解canvas
canvas标签默认宽度300px、高度225px。
同一页面中的canvas-id不可重复,如果使用一个已经出现过的canvas-id,该canvas标签对应的画布将被隐藏并不再正常工作。需要指定canvasId,该绘图上下文只作用于对应的<canvas/><!--canvas.wxml-->
<view
class="container">
<canvas
canvas-id="myCanvas"
class="myCanvas"
></canvas>
</view>/**canvas.wxss*/
.myCanvas{
border:
1px
solid
#ccc;
width:100%;
height:250px;
}二.在canvas中绘制图形(1).步骤wxml中:<canvas
canvas-id="myCanvas"
clas
s="myCanvas"
></canvas>1.创建一个Canvas绘图上下文CanvasContextconst
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).效果感谢各位的阅读!关于“微信小程序中canvas有什么用”这篇文章就分享到这里了,
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024-2025学年高二化学选择性必修1(人教版)上课课件 第4章- 第1节 免疫系统的组成和功能
- 人教版八年级物理上册期中复习测试题
- 企业级智能培训系统开发与服务合同
- 企业级技术合作合同
- 企业级在线投票系统定制合同
- 企业级员工沟通与协作服务合同
- 鄂伦春自治旗2025届数学六上期末联考模拟试题含解析
- 枣庄市市中区2024年一级造价工程师《造价管理》模拟预测试卷含解析
- 《慈母情深》教学设计
- 三明市将乐县2024-2025学年数学六上期末质量跟踪监视模拟试题含解析
- 上海电力股份有限公司招聘笔试题库2024
- 2024年高校教师资格证资格考试试题库及答案(各地真题)
- (正式版)HGT 22820-2024 化工安全仪表系统工程设计规范
- 调关镇镇政府机关大院危旧房实施拆除改建
- 上呼吸道感染的合理用药ppt课件.ppt
- 半导体物理复习要点答案
- 整车轴荷计算方法ppt课件
- 酶水解法生产低乳糖奶的工艺与检测课件
- 电力企业标准目录
- 文书档案移交清单表
- 苏教版四年级数学上册第三单元《观察物体》教材分析及全部教案(3个课时)
评论
0/150
提交评论