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

我们先相识一下canvas组件：

wxml:
<canvas binderror="canvasIdErrorCallback" bindtouchend="EventHandle" bindtouchstart="EventHandleStart" canvas-id="myCanvas" class="myCanvas" disable_scroll=""></canvas
注：

canvas 标签默认宽度300px、高度225px统一页面中的 canvas-id 不可重复，，，，，，若是使用一个已经泛起过的 canvas-id，，，，，，该 canvas 标签对应的画布将被隐藏并不再正常事情disable_scroll属性可以榨取画布在移动时且有手势事务时，，，，，，榨取屏幕转动以及下拉刷新

wxss:

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

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

//test.js
Page({
  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标签属性：

画布。。。。

注重事项：Bug & Tip

tip:canvas组件是由客户端建设的原生组件，，，，，，它的层级是最高的，，，，，，不可通过 z-index 控制层级。。。。tip: 请勿在scroll-view、swiper、picker-view、movable-view中使用canvas组件。。。。tip:css动画对canvas组件无效。。。。bug: 阻止设置过大的宽高，，，，，，在安卓下会有crash的问题