微信小程序开发—canvas绘制图形

Posted 面条请不要欺负汉堡

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序开发—canvas绘制图形相关的知识，希望对你有一定的参考价值。

一.小知识

(1).API接口


(2).context 对象的方法列表






二.步骤

wxml中：

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

     在js文件onLoad: function() {}的方法中开始编写代码


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

     const ctx = wx.createCanvasContext('myCanvas')

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

①.样式的描述

       ctx.setFillStyle('red')
②形状描述：填充矩形，描边矩形，圆，线段等
       ctx.fillRect(10, 10, 150, 75)

3.绘制

      ctx.draw()
三.效果
wxml中：
     <canvas canvas-id="myCanvas" class="myCanvas" ></canvas>
(1).绘制矩形：参数都是(起点x1,起点y1,宽度，长度)
①填充矩形
填充颜色：setFillStyle('red')