微信小程序之画布canvas组件的介绍和基本使用

惠民小程序小编了解到，微信小程序成为当下热门话题，下面从多个方面来谈谈微信小程序之画布canvas组件的介绍和基本使用。

最新消息，

此文章主要是对canvas组件的介绍与基本的使用。在组件中绘画了一条固定的直线。

我们先了解一下canvas组件：

wxml: 注：

canvas 标签默认宽度300px、高度225px同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作disable_scroll属性可以禁止画布在移动时且有手势事件时，禁止屏幕滚动以及下拉刷新

wxss:

.myCanvas{border: 1px solid; //给一个边框}

咱们看一下js中是怎么对carvas操作的

//test.jsPage({data: {},onLoad: function () {},onReady:function(){var my_carvas = wx.createCanvasContext('myCanvas',this) //1.创建carvas实例对象，方便后续使用。my_carvas.setStrokeStyle('red') //设置边框颜色。my_carvas.moveTo(20,100)//设置绘画路线的起点 （20,100）>>>（当前画布对象的 x 轴，当前画布对象的 y 轴）my_carvas.lineTo(120,100)//增加一个新点，然后创建一条从上次指定点到目标点的线。（120,100）>>>（当前画布对象的 x 轴，当前画布对象的 y 轴)my_carvas.stroke()//画出当前路径的边框。默认颜色色为黑色。my_carvas.draw() //将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。}})设置起点与终点，绘画一条直线如图：(由左至右100个像素点)

canvas标签属性：

画布。