2.2 canvas画个圆，每次点击画布，小圆向右移动1px

最新推荐文章于 2024-07-04 15:43:58 发布
最新推荐文章于 2024-07-04 15:43:58 发布
阅读量871 收藏 1
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38369460/article/details/79826671
版权
<body>
<canvas id="canvas" width="500" height="500" style="border:dashed 1px"></canvas>
</body>
<script>
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d')
var ball=function(x,y,r){
this.x=x;
this.y=y;
this.r=r;
this.draw=function(){
    ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
ctx.stroke();
};

};
var ball=new ball(100,100,20);
ball.draw();
canvas.addEventListener('mousedown',function(){
ctx.clearRect(0,0,500,500);  //清除画布
ball.x++; //小圆的圆心x加1
ball.draw();
})
</script>
sinat_38369460
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 canvas圆形粒子移动背景动画特效.zip
07-11
this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; // Move points over time _this.radians = _this.velocity; // Drag effect _this.lastMouse.x = (mouse.x - _this.lastMouse.x) * 0.05; _this.lastMouse.y = (mouse.y - _this.lastMouse.y) * 0.05; // Circular Motion _this.distanceFromCenter.x = _this.prevDistanceFromCenter.x Math.sin(_this.radians) * 100; _this.distanceFromCenter.y = _this.prevDistanceFromCenter.x Math.sin(_this.radians) * 100; _this.x = _this.lastMouse.x Math.cos(_this.radians) * _this.distanceFromCenter.x; _this.y = _this.lastMouse.y Math.sin(_this.radians) * _this.distanceFromCenter.y; _this.draw(lastPoint); };
canvas 画圆
weixin_43845137的博客
03-19 530
目录@[TOC](目录)canvas 画圆一个简单的圆圆弧等圆 canvas 画圆 一个简单的圆 arc(x, y, radius, startAngle, endAngle, 顺时针还是逆时针) ture 逆时针 false顺时针 <template> <div> <canvas ref="canvasRef" width="420px" height="420px">您的浏览器版本过低，请升级浏览器或者使用谷歌浏览器</canvas>
canvas绘制2个圆形图像
最新发布
qq_25111883的博客
07-04 91
【代码】canvas绘制2个圆形图像。
canvas画布实现一个动态效果小demo（滚动圆）
m0_50789201的博客
04-23 1444
效果展示： 一：分析问题： 首先静态结构是盒子，盒子里面有一个圆。 这个圆是在盒子内移动。 移动的过程体现随机性。 当圆碰到盒子边框时会有反弹效果。 二：解题思路： 明确使用的api是canvas画布。动态效果使用了定时器。 首先绘制出静态结构。 计算出圆移动时圆心的坐标。 计算出圆碰到盒子边框反弹效果的条件。 使用定时器动态实现效果。 三：代码实现： <!DOCTYPE html> <html lang="en"> <head> &
canvas实现圆轨滑动
qq_45939676的博客
10-09 694
canvas实现圆轨滑动
canvas绘制单个圆和同心圆
IIIIIAN
12-04 926
【代码】canvas绘制单个圆和同心圆。
微信小程序canvas画布绘制矩形、椭（圆）、直线、文字
01-09
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上进行动态图形绘制，创造出丰富的视觉效果。本文将深入探讨如何使用Canvas API在微信小程序中绘制矩形、椭圆、直线以及添加文字。 首先，我们需要...
微信小程序 wxapp画布 canvas详细介绍
09-01
// 绘制小圆 context.moveTo(85, 80); context.arc(80, 80, 5, 0, 2 * Math.PI, true); context.moveTo(125, 80); context.arc(120, 80, 5, 0, 2 * Math.PI, true); context.stroke(); // 使用wx....
圆圈滤镜泡泡动画Canvas特效
06-24
在每次重绘之前清除画布，然后遍历泡泡数组，更新并绘制每个泡泡： ```javascript let bubbles = []; function createBubble() { const x = Math.random() * canvas.width; const y = -10; // 起始位置在画布...
HTML5 画布canvas使用方法
09-28
<canvas id="myCanvas" width="200" height="100" style="border:1px solid red;"></canvas> ``` - 在JavaScript中，使用`getElementById`方法获取canvas元素，并通过`getContext("2d")`来获取2D渲染上下文，这是...
canvas 随机移动的彩色小圆点
11-12
让我们一起探索这个小案例的实现细节。 首先，我们需要在HTML文件中创建一个`<canvas>`元素，为JavaScript提供一个画布来绘制我们的小圆点。例如： ```html <!DOCTYPE html> , initial-scale=1.0"> <title>...
MFC拖拽画圆工程（可修改颜色、清空画板）
10-09
这是一个简单的MFC单文档程序，实现的主要功能是，在窗口中点击鼠标左键，确定所画圆的圆心，然后通过拖拽鼠标以确定圆的半径，鼠标左键松开后，一个圆形即在窗口画出。在完成该功能的情况下，要求在窗口所画圆不超过10个，并且提供修改画图颜色，以及清空窗口所画视图，显示各圆心坐标的三组对话框实现的功能。
画布中的鼠标位置错位，向下向右偏移
longnight_over的博客
07-01 1821
项目场景： 画布：画布中的鼠标位置错位，向下向右偏移 问题描述： 提示：没有计算偏移量，导致画出的线位置偏移。 原来的代码： measureMouseMove(){ let x = this.mouseLocation.eventXm1; // 获取起始位置的x轴坐标 let y = this.mouseLocation.eventYm1; // 获取起始位置的y轴坐标 let stopX = event.x; // 获取结束位置的x轴坐标 let s
Canvas实现左侧半圆和右侧半圆
qq_53301889的博客
07-01 1300
对于不会数学并且不知道左侧半圆和右侧半圆怎么弄的小伙伴，这里有你需要的答案 <script type="text/javascript"> let canvas = document.querySelector('canvas'); canvas.style.width = window.innerWidth; canvas.style.height = window.innerHeight; let ctx = canvas.getContext('2d');
[面向对象的案例]在canvas画布内实现小球的随机移动
overwinner
11-29 1330
[面向对象的案例]在canvas画布内实现小球的随机移动 //css部分,给画布设置边框 style> canvas { border:1px solid orange; } style> //html 添加画布 canvas id="game" width="500" height="500">canvas> 准备工作 先确定所需要的属性 小球
html5 canvas圆点跟随鼠标光标移动
agoling的博客
10-18 4111
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;鼠标demo&lt;/title&gt; &lt;/head&gt; &lt;body&gt;     &lt;canvas id="canvas&
H5 使用画布Canvas + ES5 纯原生动态绘制圆形 圆可实现位置拖放
虎 序的博客
08-26 621
Demo代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圆形</title> </head> <style> .cus-
用canvas绘制一个圆形，实现绕着一个中心运动
马优晨
11-02 5557
实现效果 使用canvas绘制一个圆形，实现绕着一个中心，轨迹类似于走一个椭圆的轨迹那样路线，并且实现漂浮的效果。这里只是一个实例Demo，直接运行就可以，下面附上代码：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content
uniapp 画布绘制圆角
08-12
你可以使用 `<canvas>` 标签来在 UniApp 中绘制圆角的画布。以下是一个示例代码： ```html <template> <view> <canvas id="myCanvas" style="width: 300px; height: 300px;"></canvas> </view> </template> <script> export default { onReady() { const ctx = uni.createCanvasContext('myCanvas', this); // 设置圆角矩形的边框颜色和填充色 ctx.setStrokeStyle('#000000'); ctx.setFillStyle('#FF0000'); // 绘制圆角矩形 this.roundRect(ctx, 50, 50, 200, 200, 20); // 绘制完成并显示在画布上 ctx.stroke(); ctx.fill(); ctx.draw(); }, roundRect(ctx, x, y, width, height, radius) { ctx.beginPath(); ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5); ctx.lineTo(x + width - radius, y); ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, Math.PI * 2); ctx.lineTo(x + width, y + height - radius); ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5); ctx.lineTo(x + radius, y + height); ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI); ctx.closePath(); } } </script> ``` 这个示例代码会在 `<canvas>` 标签内绘制一个宽高为 200px 的圆角矩形，圆角半径为 20px，边框颜色为黑色，填充色为红色。你可以根据需要调整参数来绘制不同大小和样式的圆角矩形。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值