国外做伞的品牌网站,自己做的网站可以开直播,百度推广登录网站,企业seo解决方案Hello大家好#xff0c;好久没有更新了#xff0c;最近在忙一些其他的事#xff0c;今天说一下画布canvas#xff0c;下面是我的代码#xff0c;实现了一个点从画布的#xff08;0,0#xff09;到#xff08;canvas.width#xff0c;canvas.height#xff09;的一个实…Hello大家好好久没有更新了最近在忙一些其他的事今天说一下画布canvas下面是我的代码实现了一个点从画布的0,0到canvas.widthcanvas.height的一个实现其中我在canvas里面加了一个背景你们只需要把你们的图片放在上面即可实现一小段代码的运行好久没有说知识点了慢慢会来的。打算更一些计网和数据库暑假说吧我是
爱吃鸡爪zi
话不多说代码如下建议从draw函数看起走
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0stylebody {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {text-align: center;font-family: Arial, sans-serif;border: 2px solid #000;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);height: 80vh;display: flex;flex-direction: column;justify-content: center;align-items: center;}canvas {border: 1px solid #000;width: 80%;height: 50%;}.buttons {margin-top: 20px;}button {margin: 0 10px;padding: 10px 20px;font-size: 16px;cursor: pointer;}/style
/head
bodydiv classcontainerh1路径安全活动展示/h1canvas idmyCanvas/canvasdiv classbuttonsbutton idbackButton返回上一级/buttonbutton idrefreshButton刷新/buttonbutton idstopButton停止动画/button/div/divscriptvar canvas document.getElementById(myCanvas);var ctx canvas.getContext(2d);// 设置画布的宽度和高度canvas.width 400;canvas.height 400;// 创建一个新的Image对象var backgroundImage new Image();// 设置Image对象的src属性为你的图片URLbackgroundImage.src ../img/bg1.png;// 在图片加载完成后绘制图片到画布上backgroundImage.onload function() {ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);};// 在图片加载完成后绘制图片到画布上backgroundImage.onload function() {ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);};var obstacles [{x:100 ,y:0 , size:15},{ x: 50, y: 50, size: 10 },{ x: 100, y: 100, size: 10 },{x:180 ,y:100 , size:15},{ x: 150, y: 150, size: 10 },{x:170 ,y:210 , size:15},{x:250 ,y:210 , size:15},{x:250 ,y:260 , size:15},{x:380 ,y:260 , size:15}];var redCircle {x: 10,y: 10,speed: 0.6,direction: right};var animationRunning true;var redCircleVisible true;function drawObstacles() {for (var i 0; i obstacles.length; i) {var obstacle obstacles[i];ctx.fillStyle black;ctx.fillRect(obstacle.x, obstacle.y, obstacle.size, obstacle.size);}}function drawRedCircle() {if (redCircleVisible) {ctx.fillStyle red;ctx.beginPath();ctx.arc(redCircle.x, redCircle.y, 10, 0, Math.PI * 2);ctx.fill();}}function updateRedCirclePosition() {if (redCircle.direction right) {redCircle.x redCircle.speed;if (redCircle.x canvas.width - 10) {redCircle.x canvas.width - 10;redCircle.direction down;}} else if (redCircle.direction down) {redCircle.y redCircle.speed;if (redCircle.y canvas.height - 10) {redCircle.y canvas.height - 10;redCircleVisible false;animationRunning false;alert(红色点已到达右下角);}}for (var i 0; i obstacles.length; i) {var obstacle obstacles[i];if (redCircle.x obstacle.x obstacle.size redCircle.x 10 obstacle.x redCircle.y obstacle.y obstacle.size redCircle.y 10 obstacle.y) {if (redCircle.direction right) {redCircle.direction down;} else if (redCircle.direction down) {redCircle.direction right;}}}}function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);drawObstacles();drawRedCircle();updateRedCirclePosition();}function animate() {if (animationRunning) {draw();requestAnimationFrame(animate);}}animate();// 按钮事件处理函数document.getElementById(backButton).addEventListener(click, function() {window.history.back();});document.getElementById(refreshButton).addEventListener(click, function() {window.location.reload();});document.getElementById(stopButton).addEventListener(click, function() {animationRunning false;alert(动画已停止);});/script
/body
/html其中没有使用什么算法// 设置Image对象的src属性为你的图片URL backgroundImage.src ../img/bg1.png;把这个的src换为自己的即可。下面是我的运行截图
