Javascript 用鼠标单击在画布上绘制具有随机颜色的圆_Javascript_Html_Canvas

Javascript 用鼠标单击在画布上绘制具有随机颜色的圆

javascript html canvas

Javascript 用鼠标单击在画布上绘制具有随机颜色的圆,javascript,html,canvas,Javascript,Html,Canvas,我正在尝试使用html5和javascript开发一个简单的画布应用程序。我想根据鼠标在画布上的点击位置做一个圆圈。每次用户在画布中单击时，都应绘制一个圆圈。此外，圆的颜色需要随机选择。我已经编写了随机颜色和位置函数来获得鼠标在画布中的x和y位置。但当我跑步时，什么都没有发生以下是我的html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

我正在尝试使用html5和javascript开发一个简单的画布应用程序。我想根据鼠标在画布上的点击位置做一个圆圈。每次用户在画布中单击时，都应绘制一个圆圈。此外，圆的颜色需要随机选择。我已经编写了随机颜色和位置函数来获得鼠标在画布中的x和y位置。但当我跑步时，什么都没有发生

以下是我的html代码：

   <!DOCTYPE html>
 <html lang="en">
<head>
    <meta charset="utf-8">
    <script src="circle.js"></script>
  <style type="text/css">

 #testCanvas {
       border: 2px solid;
 }
</style>  

</head>
<body>

     <canvas id="testCanvas" width="400" height="400"> </canvas>

</body>


#测试画布{
边框：2倍实心；
}

以下是我的javascript代码：

window.onload = init;

function init() {
// access the canvas element and its context
 var canvas = document.getElementById("testCanvas");
 var context = canvas.getContext("2d");

var pos = getMousePos(canvas, e);
posx = pos.x;
posy = pos.y;
context.fillStyle = randomColor();

// fill a circle
context.beginPath();
context.arc(posx,posy, 30, 0, 2 * Math.PI, true);
context.fill();
context.closePath();

 }

 function randomColor() {
    var color = [];
    for (var i = 0; i < 3; i++) {
     color.push(Math.floor(Math.random() * 256));
    }
    return 'rgb(' + color.join(',') + ')';
   }

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
   x: evt.clientX - rect.left,
   y: evt.clientY - rect.top
 };
}

window.onload=init；
函数init（）{
//访问canvas元素及其上下文
var canvas=document.getElementById（“testCanvas”）；
var context=canvas.getContext（“2d”）；
var pos=getMousePos（画布，e）；
posx=pos.x；
posy=pos.y；
context.fillStyle=randomColor（）；
//围成一个圈
context.beginPath（）；
arc（posx，posy，30,0,2*Math.PI，true）；
context.fill（）；
closePath（）；
}
函数randomColor（）{
var color=[]；
对于（变量i=0；i<3；i++）{
color.push（Math.floor（Math.random（）*256））；
}
返回'rgb（'+color.join（'，'）+'）；
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}

您需要为画布实现一个单击处理程序，以便每次单击画布时都会收到一个事件形式的通知：

//访问画布元素及其上下文
var canvas=document.getElementById（“testCanvas”）；
var context=canvas.getContext（“2d”）；
//添加单击处理程序
canvas.onclick=函数（e）{
var pos=getMousePos（canvas，e）；//像以前一样获取位置
context.fillStyle=randomColor（）；//获取填充颜色
//围成一个圈
context.beginPath（）；//现在我们可以在单击时绘制圆
context.arc（pos.x，pos.y，30,0,2*Math.PI）；//像这样直接使用pos对象
context.fill（）；
//此处不需要closePath（），在调用fill（）后将不起作用
}
函数randomColor（）{
var color=[]；
对于（变量i=0；i<3；i++）{
color.push（Math.floor（Math.random（）*256））；
}
返回'rgb（'+color.join（'，'）+'）；
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}

canvas{border:1px solid#999}

您需要为画布实现一个单击处理程序，以便每次单击画布时都会收到一个事件形式的通知：

//访问画布元素及其上下文
var canvas=document.getElementById（“testCanvas”）；
var context=canvas.getContext（“2d”）；
//添加单击处理程序
canvas.onclick=函数（e）{
var pos=getMousePos（canvas，e）；//像以前一样获取位置
context.fillStyle=randomColor（）；//获取填充颜色
//围成一个圈
context.beginPath（）；//现在我们可以在单击时绘制圆
context.arc（pos.x，pos.y，30,0,2*Math.PI）；//像这样直接使用pos对象
context.fill（）；
//此处不需要closePath（），在调用fill（）后将不起作用
}
函数randomColor（）{
var color=[]；
对于（变量i=0；i<3；i++）{
color.push（Math.floor（Math.random（）*256））；
}
返回'rgb（'+color.join（'，'）+'）；
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}

canvas{border:1px solid#999}

下面是添加事件处理程序的另一个示例/方法。您可以将“单击”更改为“mousemove”，其他人可以尝试不同的东西

// access the canvas element and its context
window.onload = init;

function init(){
  var canvas = document.getElementById("testCanvas");
  var context = canvas.getContext("2d");

  function drawCircle(pos,canvas){
    posx = pos.x;
    posy = pos.y;
    context.fillStyle = randomColor();

  // fill a circle
    context.beginPath();
    context.arc(posx,posy, 30, 0, 2 * Math.PI, true);
    context.fill();
    context.closePath();

  }

  function randomColor() {
   var color = [];
   for (var i = 0; i < 3; i++) {
    color.push(Math.floor(Math.random() * 256));
   }
   return 'rgb(' + color.join(',') + ')';
  }

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
    } ;
  }

  canvas.addEventListener('click', function(evt){
    var mousePos = getMousePos(canvas,evt);
    drawCircle(mousePos,canvas);
  },false);
}

//访问画布元素及其上下文
window.onload=init；
函数init（）{
var canvas=document.getElementById（“testCanvas”）；
var context=canvas.getContext（“2d”）；
函数drawCircle（位置、画布）{
posx=pos.x；
posy=pos.y；
context.fillStyle=randomColor（）；
//围成一个圈
context.beginPath（）；
arc（posx，posy，30,0,2*Math.PI，true）；
context.fill（）；
closePath（）；
}
函数randomColor（）{
var color=[]；
对于（变量i=0；i<3；i++）{
color.push（Math.floor（Math.random（）*256））；
}
返回'rgb（'+color.join（'，'）+'）；
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
} ;
}
canvas.addEventListener（'click'，函数（evt）{
var mousePos=getMousePos（canvas，evt）；
drawCircle（鼠标垫、画布）；
}，假）；
}

下面是添加事件处理程序的另一个示例/方法。您可以将“单击”更改为“mousemove”，其他人可以尝试不同的东西

// access the canvas element and its context
window.onload = init;

function init(){
  var canvas = document.getElementById("testCanvas");
  var context = canvas.getContext("2d");

  function drawCircle(pos,canvas){
    posx = pos.x;
    posy = pos.y;
    context.fillStyle = randomColor();

  // fill a circle
    context.beginPath();
    context.arc(posx,posy, 30, 0, 2 * Math.PI, true);
    context.fill();
    context.closePath();

  }

  function randomColor() {
   var color = [];
   for (var i = 0; i < 3; i++) {
    color.push(Math.floor(Math.random() * 256));
   }
   return 'rgb(' + color.join(',') + ')';
  }

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
    } ;
  }

  canvas.addEventListener('click', function(evt){
    var mousePos = getMousePos(canvas,evt);
    drawCircle(mousePos,canvas);
  },false);
}

//访问画布元素及其上下文
window.onload=init；
函数init（）{
var canvas=document.getElementById（“testCanvas”）；
var context=canvas.getContext（“2d”）；
函数drawCircle（位置、画布）{
posx=pos.x；
posy=pos.y；
context.fillStyle=randomColor（）；
//围成一个圈
context.beginPath（）；
arc（posx，posy，30,0,2*Math.PI，true）；
context.fill（）；
closePath（）；
}
函数randomColor（）{
var color=[]；
对于（变量i=0；i<3；i++）{
color.push（Math.floor（Math.random（）*256））；
}
返回'rgb（'+color.join（'，'）+'）；
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
} ;
}
canvas.addEventListener（'click'，函数（evt）{
var mousePos=getMousePos（canvas，evt）；
drawCircle（鼠标垫、画布）；
}，假）；
}

我是否需要在最初调用的init（）或draw（）方法中编写事件处理程序？@Rahila该处理程序可以是