小程序canvas学习

效果图:

.wxml

<canvas style="width: 100vw; height: 100vh;" canvas-id="firstCanvas"></canvas>

.js

  onLoad: function (options) {

    const ctx = wx.createCanvasContext('firstCanvas')
var canvasWidth = wx.getSystemInfoSync().windowWidth
var canvasHeight = wx.getSystemInfoSync().windowHeight
var numParticles = 50
var bg = [18, 10, 34]
var cols = ['#FF5722', '#FF9800', '#FF9800', '#FF9800', '#FF9800', '#B71C1C', '#00BCD4', '#00BCD4', '#009688']
setup()
function setup() {
ctx.beginPath();
ctx.rect(0, 0, canvasWidth, canvasHeight)
ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${1})`
ctx.fill()
ctx.draw()
} // window.requestAnimationFrame(animate); setInterval(animate, 60)
function animate() {
fade(0.3)
draw() // window.requestAnimationFrame(function(){animate()})
} function fade(amt) {
ctx.beginPath();
ctx.rect(0, 0, canvasWidth, canvasHeight)
ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})`
ctx.fill()
ctx.draw()
} function Particle() {
this.pos = {
x: Math.random() * canvasWidth * 0.8 + canvasWidth * 0.1,
y: Math.random() * canvasHeight * 0.8 + canvasHeight * 0.1
}
this.r = 1
this.speed = 6
this.step = Math.random() * 400
this.vx = Math.random() * this.speed / 4 - this.speed / 8
this.vy = Math.random() * this.speed / 4 - this.speed / 8
this.colIndex = Math.floor(Math.random() * cols.length)
this.history = []
this.update = function () {
this.step++
this.step %= 400
if (this.history.length > 5) {
this.history.shift()
}
this.pos.x += this.vx
this.pos.y += this.vy
this.vx = this.vx * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
this.vy = this.vy * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
if (this.history.length > 4) {
ctx.beginPath()
ctx.moveTo(this.pos.x, this.pos.y)
for (var i = this.history.length - 1; i >= 0; i--) {
ctx.lineTo(this.history[i].x, this.history[i].y)
}
ctx.fillStyle = cols[this.colIndex]
ctx.strokeStyle = cols[this.colIndex]
ctx.fill()
ctx.lineWidth = 2
ctx.lineJoin = "round"
// ctx.closePath()
ctx.stroke()
}
if (this.pos.x > canvasWidth || this.pos.x < 0 || this.pos.y > canvasHeight || this.pos.y < 0) {
delete this.pos
delete this.history
return false;
}
this.history.push({
x: this.pos.x,
y: this.pos.y
})
return true;
}
} var particles = [new Particle()] function draw() {
if (particles.length < numParticles) {
particles.push(new Particle())
}
particles = particles.filter(function (p) {
return p.update()
}) }
},

总结:目前小程序canvas还很卡 不建议使用

PC端:

效果图

代码:

js

<script type="text/javascript">

var canvas = document.createElement('canvas')
document.getElementsByTagName('body')[0].appendChild(canvas)
var ctx = canvas.getContext('2d')
var numParticles = 50 var bg = [18, 10, 34]
var cols = ['#FF5722', '#FF9800', '#FF9800', '#FF9800', '#FF9800', '#B71C1C', '#00BCD4', '#00BCD4', '#009688'] setup() function setup() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${1})`
ctx.fill()
} // window.requestAnimationFrame(animate); setInterval(animate, 1000/29.9)
function animate() {
fade(0.3)
draw()
// window.requestAnimationFrame(function(){animate()})
} function fade(amt) {
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})`
ctx.fill()
} function Particle () {
this.pos = {
x: Math.random() * canvas.width * 0.8 + canvas.width * 0.1,
y: Math.random() * canvas.height * 0.8 + canvas.height * 0.1
}
this.r = 1
this.speed = 6
this.step = Math.random() * 400
this.vx = Math.random() * this.speed/4 - this.speed/8
this.vy = Math.random() * this.speed/4 - this.speed/8
this.colIndex = Math.floor(Math.random()*cols.length)
this.history = []
this.update = function () {
//////////////////////////////////////
this.step ++
this.step %= 400
if (this.history.length > 5){
this.history.shift()
}
this.pos.x += this.vx
this.pos.y += this.vy
this.vx = this.vx * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
this.vy = this.vy * 0.98 + (Math.random() * this.speed * 2 - this.speed) * 0.12
//////////////////////////////////////
if (this.history.length > 4){
ctx.beginPath()
ctx.moveTo(this.pos.x ,this.pos.y)
for (var i = this.history.length-1; i >= 0; i--){
ctx.lineTo(this.history[i].x ,this.history[i].y)
}
// ctx.fillStyle = `hsla(${Math.sin( this.step / 300) * 70 + 70},${99}%,${50}%,1)`
// ctx.strokeStyle = `hsla(${Math.sin( this.step / 300) * 70 + 70},${99}%,${50}%,0.5)`
ctx.fillStyle = cols[this.colIndex]
ctx.strokeStyle = cols[this.colIndex]
ctx.fill()
ctx.lineWidth = 2
ctx.lineJoin = "round"
// ctx.closePath()
ctx.stroke()
} //////////////////////////////////////
if (this.pos.x > canvas.width || this.pos.x < 0 || this.pos.y > canvas.height || this.pos.y < 0) {
delete this.pos
delete this.history
return false;
}
this.history.push({
x: this.pos.x,
y: this.pos.y
})
return true;
}
} var particles = [new Particle()] function draw() {
if (particles.length < numParticles) {
particles.push(new Particle())
} particles = particles.filter(function (p){
return p.update()
}) }
</script>

记录一下小程序canvas的更多相关文章

  1. 技术博客--微信小程序canvas实现图片编辑

    技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...

  2. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  3. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  4. 微信小程序 canvas 字体自动换行(支持换行符)

    微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...

  5. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  6. 小程序canvas生成海报保存至手机相册

    小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...

  7. 优化版小程序canvas,增加失败逻辑,及完善文字

    wxml <view class="shareBox" style="backgound:{{isShow ? '#000' : '#fff'}}" wx ...

  8. 微信小程序 | canvas绘图

    1.新的尺寸单位 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则 ...

  9. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

随机推荐

  1. C#的抽象类和接口,区别与相似

        一.抽象类:抽象类是特殊的类,只是不能被实例化:除此以外,具有类的其他特性:重要的是抽象类可以包括抽象方法,这是普通类所不能的.抽象方法只能声明于抽象类中,且不包含任何实现,派生类必须覆盖它们 ...

  2. 关于html/css的一些小技巧之hack掉"margin-top"层叠问题

    身为小前端菜鸟一枚,忽然听到这样一则传言~~ 心情久久不能平复,想到前几日,开通了博客君,特来此寻找存在feeling~ 旨在造福普罗大众(更多前端小菜鸟) 话不多说, 我们步入正题,今天来给大家分享 ...

  3. eclipse 搭建maven项目

    最近重新搭建项目把日常用到的东西都记录一下. 创建maven项目(maven4.4以后都自带maven了)   1,创建一个Maven parent  主要是各个项目之间的依赖 使用eclipse 创 ...

  4. Delphi调用API函数获取Windows目录信息、获取System目录信息、获取Temp临时文件目录信息

    var Str1, Str2: Array[..Max_Path]of Char;//开辟缓冲区 Str3: Array[..]of Char; begin GetWindowsDirectory(@ ...

  5. 2018-2019-2 网络对抗技术 20165335 Exp4 恶意代码分析

    实验内容: 一.使用schtacks进行系统运行监控,使用sysmon工具监控系统的具体进程,使用各种工具进行监控,并针对软件的启动回连,安装到目标机,以及其他的控制行为的分析,同时,对主机的注册表, ...

  6. 2018-2019-2 网络对抗技术 20165335 Exp2 后门原理与实践

    一.基础问题回答: (1)例举你能想到的一个后门进入到你系统中的可能方式? 钓鱼网站:搞一个假网站,假淘宝,盗版电影,文库下载文档什么的,下载东西的时候把带隐藏的后门程序附带下载进去,自启动,反弹连接 ...

  7. 初步了解,vue的转发机制(proxyTable)

    vue的转发机制(proxyTable),proxyTable代理功能可以实现转发机制,需要修改config里面修改index.js文件 修改index.vue中请求的代码(该功能是webpack-s ...

  8. 3.JAVA基础复习——JAVA中的类与对象

    什么是对象: 就是现实中真实的实体,对象与实体是一一对应的,现实中每一个实体都是一个对象在. JAVA中的对象: Java中通过new关键字来创建对象. 类: 用JAVA语言对现实生活中的事物进行描述 ...

  9. 画多边形form并填充背景色(可以实现圆角边框 有锯齿)

    public Form1() { InitializeComponent(); this.BackColor = ColorTranslator.FromHtml("#F7F1F1" ...

  10. 如何对tcp流认证并加密

    一个场景:目前越来越多的业务需要远程读写Redis,而Redis 本身不提供 SSL/TLS 的支持,在需要安全访问的环境下. 这时候就需要额外的手段进行加密认证,这里有两种手段:spiped 和 n ...