canvas动画特效

最新推荐文章于 2024-05-29 10:05:45 发布

java_Mr.liu

最新推荐文章于 2024-05-29 10:05:45 发布

阅读量159

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/L_zhazhahui/article/details/127755135

版权

<body>
    <canvas id="flagCanvas" width="531" height="108" class="sidai"></canvas>
    
</body>

<script>
    
var canvas = document.getElementById('flagCanvas')
var ctx = canvas.getContext('2d')

var IMG_MAX_WIDTH = 531
var IMG_MAX_HEIGHT = 108
var imgWidth, imgHeight

var image = new Image()
image.src = 'https://img2.baidu.com/it/u=100493533,1682034017&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=261'

var amplitude = 10  
var period = 2  
var frequency = 0.8  
var wavelength 
var v  
var cftX 
var cftA 

image.onload = function (ev) {

    imgWidth = Math.floor(image.width)
    imgHeight = Math.floor(image.height)

    var canvas = document.getEleme