目录
前言:只因在b站看到了动态酷炫的心,我就特别的想要学习,了解,弄清楚具体的代码是怎么敲的,就看了很久的视频,终于学会了,哈哈
先给大家看效果
这是五颜六色的心,但颜色有些暗
这是红色 亮堂的心 ,还是这个心好看,嘿嘿
先给大家放总体代码,大家瞅瞅,看那种动态的,特酷炫的心,贼帅
总代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
margin: 0 auto;
border: 1px solid #000;
display: block;
}
</style>
</head>
<body>
<canvas id="cont" width="500px" height="500px">你好呀</canvas>
<script>
// 使用原生js操作canvas
// 1.获取画布
var canvas = document.querySelector('#cont')
// 2.获取画布的上下文
var ctx = canvas.getContext('2d')
var w = 500,h=500
// todo step1 画文字
drawText('❤',w/2,h/2)
// 2.获取像素点
var copy = ctx.getImageData(0,0,w,h)
// 清除画布
ctx.clearRect(0,0,w,h)
// 产生随机数
function r(num) {
return parseInt(Math.random()*num)
}
// 运动次数
var times = 100
// 1. 定义小球类
function Ball(xEnd,yEnd) {
// 起始位置,随机
this.xStart = r(w)
this.yStart = r(h)
// 结束位置,固定
this.xEnd = xEnd
this.yEnd = yEnd
// 计算运动速度,通过起始点和结束点
this.xSpeed = (this.xEnd-this.xStart)/times
this.ySpeed = (this.yEnd-this.yStart)/times
// 小球运动的中心点
this.x =this.xStart
this.y = this.yStart
// 设置半径和颜色
this.r = 3
this.color = '#f00'
// 设置填充文字和颜色
this.text ='❤'
this.color = 'rgb(255,'+r(255)+','+r(255)+')'
}
Ball.prototype.show = function () {
//计算每次运动的坐标位置
this.x += this.xSpeed
this.y += this.ySpeed
drawFillText(this.text,this.x,this.y,this.color)
// drawCircle(this.x,this.y,this.r,this.color)
}
var leap = 12
var ballArr = [] //小球数组
for (var y = 0; y < h; y+=leap) {
for (var x = 0; x < w; x+=leap) {
var index = x + y*w
var a = copy.data[index*4+3]
if (a>128) {
// 2.调用小球类,画圆
var ball = new Ball(x,y)
//存入数组
ballArr.push(ball)
//显示小球
ball.show()
}
}
}
// todo steps3 动起来
var count = 0
var timer = setInterval(() => {
// 清除画布
ctx.clearRect(0,0,w,h)
for (var i = 0; i < ballArr.length; i++) {
ballArr[i].show()
}
count++
// 判断何时停止
if (count+1 == times) {
clearInterval(timer)
return
}
}, 20);
// 画直线
function drawLine(x1,y1,x2,y2,color) {
ctx.beginPath()
ctx.moveTo(x1,y1)
ctx.lineTo(x2,y2)
ctx.strokeStyle = color || '#000'
ctx.stroke()
ctx.closePath()
}
// 画文字
function drawText(text,x,y) {
ctx.font = '300px 微软雅黑'
ctx.fillStyle = '#000'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText(text,x,y,w)
}
// 画圆
function drawCircle(x,y,r,color){
ctx.beginPath()
ctx.arc(x,y,r,0,Math.PI*2)
ctx.fillStyle= color || '#000'
ctx.fill()
}
// 画外部填充文字
function drawFillText(text,x,y,color) {
ctx.font = '12px 微软雅黑'
ctx.fillStyle = color
ctx.textAlign = 'center'
ctx.fillText(text,x,y,w)
}
</script>
</body>
</html>
这个得到的是,红色的心
那第一个效果是怎样实现的呢?
暗色的心
在上面的设置填充文字和颜色中
把颜色改为
this.color = 'rgb('+r(255)+','+r(255)+','+r(255)+')'
就好了