开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

微信小程序中的canvas

简介: 微信小程序中的canvas
+关注继续查看

canvas 常用属性:


image


canvas基本用法:


创建canvas.wxml文件。


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


canvas组件默认样式如下。


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


canvas组件默认效果图:


image


注意:


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()


效果图


image


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


image


canvas对象方法介绍:


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【微信小程序】小程序的宿主环境
文章目录 宿主环境 一、什么是宿主环境? 二、小程序的宿主环境 三、小程序宿主环境包含的内容 1.通信模型 通信的主体 小程序的通信模型 2.运行机制 小程序启动的过程 小程序页面渲染过程 3.组件 4.API
22 0
微信小程序 | 使用 canvas 生成朋友圈分享图片并保存到手机相册
小程序只能转发给好友,或者转发到微信群,并不能转发到朋友圈,那么朋友圈的巨大流量应该怎么利用起来呢?
158 0
canvas烟花效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.
786 0
微信小程序开发之路(五)
很久没有写有关微信小程序的文章了,正好最近在做小程序项目,也遇到了一些小问题,与大家分享一下。 一、如何在video、map和canvas等组件上定位元素? 在小程序中video、map和canvas等组件是原生组件,层级是最高的,我们无法通过CSS样式来控制其层级,但是有时候我们确实需要在这些组件上定位元素,比如文字和图片。
1074 0
canvas烟花锦集
canvas可以实现不同动画效果,本文主要记录几种不同节日烟花效果实现。 实现一 效果地址 html css body { background: #000; margin: 0;...
825 0
canvas粒子动画(vue)
由于知乎的粒子动画最近很火,而网上的教程大多都是jQuery的,所以我改成了最近流行vue版本。代码具体的含义我就不多做注释了可以参考http://blog.csdn.net/woosido123/article/details/72770612  这个人的博客,他已经写的很详细了我就不做重复的工作了,修改成vue的版本仅帮助喜欢用vue写动画的童鞋减少一点点的工作量。
1693 0
微信小程序开发之路(二)
由于前段时间比较忙,已经有半个多月没有更新文章了。最近微信小程序频繁更新,越来越开放,所以今天我们将继续探讨小程序。 在微信小程序开发之路(一)中讲到微信小程序的单向绑定以及使用setData()方法来更新View,这对于新手也算是个“坑”了,很容易出错。
866 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载