html5之canvas动画

た入场券 2022-03-18 08:56 278阅读 0赞

<DOCTYPE html>
    <html>
    <head>
    <title>canvas简单动画</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    var index = 20;
    var x = 1;
    $(function(){
    	start();
    	var stop = setInterval("start()",5);
    	$('#stop').click(function(){
    	 clearInterval(stop);
    	});
       $('#start').click(function(){
    	  stop = setInterval("start()",5);
    	});
    });
    var start = function (){
    
       var canvas = $('#myCanvas')[0];
       var myCanvas=canvas.getContext("2d");
       myCanvas.clearRect(0,0,500,500); //在给定的矩形内清除指定的像素
       myCanvas.fillStyle="#FF0000";  //设置或返回用于填充绘画的颜色、渐变或模式
       myCanvas.beginPath();  //起始一条路径，或重置当前路径
       myCanvas.arc(200,index,20,0,Math.PI*2,1); //x坐标，y坐标，半径，从哪开始画，Math.PI是圆周率，顺时针
       myCanvas.closePath(); //创建从当前点回到起始点的路径
       myCanvas.fill();      //填充当前绘图（路径
       index = index+x;      //起点+活动像素位置
       if(index==20 || index == 280){  //判断当前线的位置，控制在区域内
         x = x*-1;           //乘以负一用来调整线路方向
       }
    } 
    </script>
    <head>
    <canvas id="myCanvas" width="500" height="300"></canvas>
    <br>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5 canvas word,HTML5 Canvas

Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下： Canvas2Image.saveAsImage(can

朴灿烈づ我的快乐病毒、/ 2022年10月07日 12:47/ 0 赞/ 196 阅读

相关 html画布动画,HTML5画布CANVAS动画。

就剩那两个大半圆不知道怎么用代码表示了，求大神给看下，怎么设置的才可以以自己的圆心来转。实现旋转的八卦。不能上传视频，有个转的过程图，在最下面。 your browser d

柔光的暖阳◎/ 2022年10月06日 11:45/ 0 赞/ 245 阅读

相关 Canvas黑色背景粒子HTML5动画

[下载地址][Link 1]Canvas黑色背景粒子HTML5动画特效，一款基于Canvas绘制三角形弹性跳动特效。 ![1631148841.png][] dd: [

电玩女神/ 2022年09月10日 14:22/ 0 赞/ 209 阅读

相关 Canvas彩带环绕球体HTML5动画

[下载地址][Link 1]Canvas彩带环绕球体HTML5动画是一款酷炫的卡通月球旋转动画特效下载。 ![1631149347.png][] dd: [Link 1

客官°小女子只卖身不卖艺/ 2022年09月10日 14:15/ 0 赞/ 165 阅读

相关 HTML5 Canvas下雨动画背景

[下载地址][Link 1]Canvas模拟下雨效果，可以当做网页下雨背景，不错的下雨动画特效。 ![1630568787.png][] dd: [Link 1]: h

╰+攻爆jí腚メ/ 2022年09月10日 05:10/ 0 赞/ 215 阅读

相关 HTML5 Canvas动画效果实现原理

[![328298e5-6460-4029-a277-1cd702a54b46.jpg][]][328298e5-6460-4029-a277-1cd702a54b46.jpg

左手的ㄟ右手/ 2022年08月13日 11:58/ 0 赞/ 199 阅读

相关 HTML5 Canvas动画效果实现原理

使用[HTML5][]画布能够帮助我们快速实现简单的动画效果，基本原理如下： > 每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clear

小灰灰/ 2022年08月07日 09:57/ 0 赞/ 186 阅读

相关 HTML5 Canvas图片马赛克模糊动画

经常可以在网上或者电视上看到被马赛克模糊的图片或者视频，今天我们要利用[HTML5][] Canvas技术来实现图片的马赛克模糊效果。在演示中我们可以拖动滑竿来设置马赛克模糊的

布满荆棘的人生/ 2022年07月30日 13:12/ 0 赞/ 183 阅读

相关 html5的canvas旋转动画

<!DOCTYPE HTML> <html> <body> <canvas id="myCanv

以你之姓@/ 2022年07月13日 06:16/ 0 赞/ 193 阅读

相关 html5之canvas动画

<DOCTYPE html> <html> <head> <title>canvas简单动画</title> <script src="

た入场券/ 2022年03月18日 08:56/ 0 赞/ 279 阅读