본 글의 예시에서는 jQuery+canvas로 구현한 구의 평면 던지기 효과와 색상 동적 변환 효과를 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
런닝 효과 스크린샷은 다음과 같습니다.
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>canvas平抛</title> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript" > var canvasHeight = 300; var canvasWidth = 300; var g = 9.8; //x, y, vo, r function HorizenCast(context, settings) { var _self = this; $.extend(_self, settings); _self.xo = _self.x; _self.yo = _self.y; HorizenCast.createColor = function () { var r = Math.round(Math.random() * 256), g = Math.round(Math.random() * 256), b = Math.round(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } _self.cast = function () { if (_self.x > canvasWidth - _self.r || _self.y > canvasHeight - _self.r) { return; } var time = (new Date().getTime() - _self.prevTime) / 1000, x = _self.xo +_self.vo * time, y = _self.yo + 1 / 2 * g * time * time; context.beginPath(); context.fillStyle = HorizenCast.createColor(); context.arc(_self.x, _self.y, _self.r, 0, 2 * Math.PI); context.fill(); context.closePath(); _self.x = x; _self.y = y; setTimeout(function () { _self.cast(); }, 30); } _self.prevTime = new Date().getTime(); _self.cast(); } $(document).ready(function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); new HorizenCast(context, { x: 0, y: 0, vo: 100, r: 5 }); new HorizenCast(context, { x: 0, y: 0, vo: 90, r: 5 }); new HorizenCast(context, { x: 0, y: 0, vo: 80, r: 5 }); new HorizenCast(context, { x: 0, y: 0, vo: 70, r: 5 }); new HorizenCast(context, { x: 0, y: 0, vo: 60, r: 5 }); new HorizenCast(context, { x: 0, y: 0, vo: 50, r: 5 }); new HorizenCast(context, { x: 0, y: 0, vo: 40, r: 5 }); new HorizenCast(context, { x: 0, y: 0, vo: 30, r: 5 }); new HorizenCast(context, { x: 0, y: 0, vo: 20, r: 5 }); new HorizenCast(context, { x: 0, y: 0, vo: 10, r: 5 }); new HorizenCast(context, { x: 0, y: 0, vo: 5, r: 5 }); }); </script> <style type="text/css" > h2 { color:Gray; line-height:50px; } #canvas { background:#DDDDDD;} </style> </head> <body> <center> <h3>canvas实现平抛效果</h3> <hr /> <canvas id="canvas" width="300" height="300"></canvas> <hr /> </center> </body> </html>
더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "jQuery 애니메이션 및 특수 효과 사용 요약" 및 "일반적인 클래식 특수 효과 요약"을 확인할 수 있습니다. jQuery"
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.