微信小程序canvas简单使用

index.wxml文件
index.js文件
效果图

index.wxml文件

  <canvas  type="2d"  id="canvas" style="width: 100%; height: 300px;" ></canvas>

index.js文件

const app = getApp()
Page({onLoad() {// 通过 SelectorQuery 获取 Canvas 节点wx.createSelectorQuery().select('#canvas').fields({node: true,size: true,}).exec(this.init.bind(this))},init(res) {const width = res[0].widthconst height = res[0].heightconst canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr) // 等比缩放// 添加背景图片img.src = './bg.jpg'this._img = imgctx.drawImage(this._img, 0, 0, width, height) // 画圈ctx.beginPath()ctx.arc(100, 75, 10, 0, Math.PI * 2)ctx.fillStyle = '#1aad19'ctx.strokeStyle = 'rgba(1,1,1,0)'ctx.fill()ctx.stroke()ctx.beginPath()ctx.arc(200, 75, 10, 0, Math.PI * 2)ctx.fillStyle = '#1aad19'ctx.strokeStyle = 'rgba(1,1,1,0)' ctx.fill()ctx.stroke()ctx.beginPath()ctx.arc(150, 165, 10, 0, Math.PI * 2)ctx.fillStyle = '#1aad19'ctx.strokeStyle = 'rgba(1,1,1,0)'ctx.fill()ctx.stroke()// 画线ctx.beginPath();ctx.lineWidth = 1;ctx.moveTo(110, 75);ctx.lineTo(190, 75);ctx.strokeStyle = 'red'ctx.moveTo(110, 75);ctx.lineTo(150, 155);ctx.moveTo(200, 85);ctx.lineTo(150, 155);ctx.stroke();  },
})

效果图

微信小程序canvas简单使用相关推荐

微信小程序canvas 绘画组件的使用，画图
微信小程序canvas 绘画组件的使用,画图 canvas 绘画组件文章目录微信小程序canvas 绘画组件的使用,画图闲来没事写个画图的小工具吧,于是就用到了小程序的canvas组件一.先来 ...
【微信小程序canvas】实现小程序手写板用户签名(附代码)
[微信小程序canvas]实现小程序手写板用户签名(附代码) 工作中公司业务需要的微信小程序用户签字功能先看效果图: wxml <view class="wrapper"& ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
微信小程序：简单舒服新UI装逼制作神器
这是一款装逼神器小程序源码内包含了N种模板制作,另外并有大分类另外小编还给添加了几个流量主广告,包含了每一个页面都覆盖了而且流量主还不是单一种: Banner 激励视频视频广告多格子广告横 ...
微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...

微信小程序canvas简单使用

微信小程序canvas简单使用

index.wxml文件

index.js文件

效果图

微信小程序canvas简单使用相关推荐

最新文章

热门文章