微信小程序中的canvas

灰太狼 2022-11-16 01:37 664阅读 0赞

### 文章目录 ###

*  canvas 常用属性：
 *  canvas基本用法：
 *   *  注意：
 *  canvas绘制基本步骤：
 *  canvas绘制笑脸：
 *  canvas对象方法介绍：

# canvas 常用属性： #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]

# canvas基本用法： #

创建canvas.wxml文件。

canvas组件默认样式如下。

canvas { 
       width: 300px;
       height: 150px;
       display: block;
       position: relative;
    }

canvas组件默认效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]

## 注意： ##

canvas组件是原生组件，它的层级是最高的，不能通过z-index设置层级，css动画对canvas组件无效。

# canvas绘制基本步骤： #

第1步：创建Canvas绘图上下文对象CanvasContext

const ctx =  wx.createCanvasContext('myCanvas')

第2步：使用Canvas绘图上下文进行绘图描述

ctx.setFillStyle('red') 	     // 设置填充色为红色
    // 画一个矩形，填充为红色
    ctx.fillRect(10, 20, 150, 75)     // ctx.fillRect(x, y, width, height)

第3步：画图

ctx.draw()

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 2]

# canvas绘制笑脸： #

代码如下：

// 创建Canvas绘图上下文对象CanvasContext
    const ctx =  wx.createCanvasContext('myCanvas')
    // 设置线条颜色和线宽
    ctx.setStrokeStyle('#ff0000')
    ctx.setLineWidth(2)
    // 移动画笔坐标位置，绘制（外部大圆）
    ctx.moveTo(160, 100)
    ctx.arc(100, 100, 60, 0, 2 * Math.PI, true)
    // 移动画笔坐标位置，绘制（嘴巴线条）
    ctx.moveTo(140, 100)
    ctx.arc(100, 100, 40, 0, Math.PI, false)
    移动画笔坐标位置，绘制（左 右眼圆圈）
    ctx.moveTo(85, 80)
    ctx.arc(80, 80, 5, 0, 2 * Math.PI, true)
    ctx.moveTo(125, 80)
    ctx.arc(120, 80, 5, 0, 2 * Math.PI, true)
    // 画出当前路径的边框
    ctx.stroke()
    
    wx.draw ()

ok 画完了，来领取你的专属笑脸 O(∩\_∩)O  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 3]

# canvas对象方法介绍： #

CanvasContext.draw ()：将之前在绘图上下文中的描述（路径、样式、变形）画到canvas中。
    CanvasContext.arc()：创建一条弧线。
    CanvasContext.rect()：创建一个矩形路径。
    CanvasContext.lineTo()：新增一个新点，用stroke方法来画线条。
    CanvasContext.moveTo()：把路径移动到画布中的指定点，不创建线条。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221022/6d1fc9c13fc445ad86d1b1dbf8215fcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]: /images/20221022/612189e7723a43e28a664856c25b31ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 2]: /images/20221022/6278e3b3bf6e4a2a97437464c4d05193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 3]: /images/20221022/44a5b2c38bff49d28d89f7d3f049e591.png