### [微信小程序canvas基础详解](https://www.prosaas.cn/article/17708)

**Published:** 2018-03-17T05:56:36

**Author:** 5201314

**Excerpt:** canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上…

canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。本文主要和大家分享微信小程序canvas基础详解，希望能帮助到大家。

一.了解canvas

![](https://img.php.cn/upload/article/000/054/025/7b7ea2d465f1f3a63dc8e5b77805b7cb-0.png)  

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

需要指定 canvasId，该绘图上下文只作用于对应的 `9eb6a00f944b38c7333d032ed32cee03`

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

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

![](https://img.php.cn/upload/article/000/054/025/7b7ea2d465f1f3a63dc8e5b77805b7cb-1.png)  

二.在canvas中绘制图形

(1).步骤

wxml中：

<canvas canvas-id="myCanvas" clas
s="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).效果

![](https://img.php.cn/upload/article/000/054/025/7b7ea2d465f1f3a63dc8e5b77805b7cb-2.png)

相关推荐：

js与canvas合成图片做出微信公众号海报功能

怎样用canvas来绘制弧线和圆

用H5的canvas做出弹幕效果

以上就是微信小程序canvas基础详解的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---