-
△落殇.2020-01-20 00:00
- 46
- 0
<canvas id="myCanvas1" class="roundness" width="300" height="300"></canvas>
<canvas id="myCanvas2" class="roundness" width="300" height="300"></canvas>
<canvas id="myCanvas3" class="roundness" width="300" height="300"></canvas>
<script>
var context1=document.getElementById("myCanvas1");
var context2=document.getElementById("myCanvas2");
var context3=document.getElementById("myCanvas3");
var ctx1=context1.getContext("2d");
var ctx2=context2.getContext("2d");
var ctx3=context3.getContext("2d");
ctx1.lineWidth = 2;//线条的宽度
ctx2.lineWidth = 2;//线条的宽度
ctx3.lineWidth = 2;//线条的宽度
ctx1.strokeStyle = "#b81113";//线条的颜色
ctx2.strokeStyle = "#b81113";//线条的颜色
ctx3.strokeStyle = "#b81113";//线条的颜色
ctx1.beginPath();
ctx2.beginPath();
ctx3.beginPath();
ctx1.arc(100,100,94,1.4*Math.PI,1*Math.PI);
ctx2.arc(100,100,94,1.4*Math.PI,1*Math.PI);
ctx3.arc(100,100,94,1.4*Math.PI,1*Math.PI);
ctx1.stroke();
ctx2.stroke();
ctx3.stroke();
</script> 三个圆形都是一样的，怎么精简？ 各位小哥哥小姐姐求指教
- 共 0 条
- 全部回答
-
武异 普通会员 1楼
在JavaScript中，我们不能直接在一个canvas元素上绘制多个圆形。但是，我们可以通过以下步骤来实现这个目标：
- 创建一个canvas元素，并为其设置一个默认颜色和背景色。
- 在canvas上绘制一个圆形，使其半径等于需要的圆形半径。
- 在圆形的周围，再绘制两个同样大小的圆形，这两个圆形的半径应大于原圆形的半径。
以下是一个示例代码：
```javascript // 创建canvas元素 var canvas = document.getElementById('myCanvas');
// 设置默认颜色和背景色 canvas.style.backgroundColor = 'red'; canvas.style.color = '#fff';
// 在canvas上绘制圆形 var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 100, 0, Math.PI*2); ctx.fillStyle = 'red'; ctx.fill(); ctx.closePath();
// 在圆形周围绘制两个同样大小的圆形 var leftCircle = ctx.beginPath(); var rightCircle = ctx.beginPath(); var circle1 = ctx.arc(50, 150, 100, 0, Math.PI*2); circle1.fillStyle = 'red'; circle1.fill(); circle1.closePath();
var circle2 = ctx.beginPath(); var circle3 = ctx.beginPath(); circle2.arc(150, 50, 100, 0, Math.PI*2); circle2.fillStyle = 'red'; circle2.fill(); circle2.closePath(); ```
在这个示例中，我们首先创建了一个canvas元素，并为其设置了默认颜色和背景色。然后，我们在canvas上绘制了一个圆形，并在圆形的周围绘制了两个同样大小的圆形。
-
＊.偷吃美梦的厷举 普通会员 2楼
在JavaScript中，我们不能直接在一个canvas元素上绘制多个圆形。但是，我们可以通过以下步骤来实现这个目标：
- 创建一个canvas元素，并为其设置一个默认颜色和背景色。
- 在canvas上绘制一个圆形，使其半径等于需要的圆形半径。
- 在圆形的周围，再绘制两个同样大小的圆形，这两个圆形的半径应大于原圆形的半径。
以下是一个示例代码：
```javascript // 创建canvas元素 var canvas = document.getElementById('myCanvas');
// 设置默认颜色和背景色 canvas.style.backgroundColor = 'red'; canvas.style.color = '#fff';
// 在canvas上绘制圆形 var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 100, 0, Math.PI*2); ctx.fillStyle = 'red'; ctx.fill(); ctx.closePath();
// 在圆形周围绘制两个同样大小的圆形 var leftCircle = ctx.beginPath(); var rightCircle = ctx.beginPath(); var circle1 = ctx.arc(50, 150, 100, 0, Math.PI*2); circle1.fillStyle = 'red'; circle1.fill(); circle1.closePath();
var circle2 = ctx.beginPath(); var circle3 = ctx.beginPath(); circle2.arc(150, 50, 100, 0, Math.PI*2); circle2.fillStyle = 'red'; circle2.fill(); circle2.closePath(); ```
在这个示例中，我们首先创建了一个canvas元素，并为其设置了默认颜色和背景色。然后，我们在canvas上绘制了一个圆形，并在圆形的周围绘制了两个同样大小的圆形。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部