JS 写一个圆形,单击时变红色,再次单击变蓝色,不要使用Canvas
时间: 2023-06-05 10:06:54 浏览: 46
抱歉,我可以回答您的问题。以下是 JS 写一个圆形,单击时变红色,再次单击变蓝色的代码:
HTML 代码:
```
<div id="circle"></div>
```
CSS 代码:
```
#circle {
width: 50px;
height: 50px;
border-radius: 25px;
background-color: red;
}
```
JS 代码:
```
var circle = document.getElementById("circle");
circle.addEventListener("click", function() {
if (circle.style.backgroundColor === "red") {
circle.style.backgroundColor = "blue";
} else {
circle.style.backgroundColor = "red";
}
});
```
相关问题
JS 写一个圆形,单击时变红色,再次单击变蓝色
好的,这个问题可以回答。以下是代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击圆形变色</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height/2;
var radius = 50;
var color = "red";
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
canvas.onclick = function() {
if (color == "red") {
color = "blue";
} else {
color = "red";
}
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}
</script>
</body>
</html>
```
这里使用了HTML5中的Canvas元素,绘制了一个圆形并初始化为红色。然后给Canvas绑定了一个点击事件,每次点击时判断当前颜色,将其反转为蓝色或红色,并重新绘制圆形。
使用uniapp写一个canvas圆形
Sure, here's an example of how to create a circular canvas using uniapp:
<template>
<canvas id="myCanvas" style="width: 100%; height: 100%;"></canvas>
</template>
<script>
export default {
mounted() {
const canvas = uni.createCanvasContext('myCanvas', this);
const width = uni.upx2px(200);
const height = uni.upx2px(200);
const radius = width / 2;
const centerX = width / 2;
const centerY = height / 2;
canvas.beginPath();
canvas.arc(centerX, centerY, radius, 0, 2 * Math.PI);
canvas.setFillStyle('#000000');
canvas.fill();
canvas.closePath();
canvas.draw();
}
}
</script>
This code creates a canvas element with an ID of "myCanvas" and sets its width and height to 100%. In the mounted() lifecycle hook, we create a canvas context using uni.createCanvasContext() and set the canvas dimensions to 200x200 pixels. We then calculate the center point and radius of the circle, and use canvas.arc() to draw the circle. Finally, we set the fill style to black and call canvas.fill() to fill the circle with color.