<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<script src="jquery.min.js"></script>
<style>
</style>
<body>
<canvas id="mycan" width=600 height=600></canvas>
</body>
<script>

function GetRandomNum(Min,Max)
{
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

var globl_w = 600;
var globl_h = 600;
var mycan = document.getElementById('mycan');
var ctx = mycan.getContext("2d");
makerect(0,0,globl_w,globl_w);

//鼠标点击生成圆
$("#mycan").click(function(e){
var ev= ev || window.event;
var mousePos = mouseCoords(ev);
//alert(ev.pageX);
makearc(mousePos.x,mousePos.y,GetRandomNum(10,50),0,180,'red');

})

//循环生成圆，
for(var i=0;i<10;i++){
//makearc(GetRandomNum(50,globl_w),GetRandomNum(50,globl_h),GetRandomNum(10,50),0,180,'red');
}
// setInterval('myAnimation()', 1050);
function myAnimation(){
ctx.clearRect(0, 0, globl_w, globl_h);
}
function makearc(x,y,r,s,e,color){//生成圆

var mycan = document.getElementById('mycan');
var ctx = mycan.getContext("2d");
ctx.beginPath();
ctx.fillStyle=color;
ctx.arc(x,y,r,s,e);
ctx.fill();
}
function makerect(x,y,w,h){

var mycan = document.getElementById('mycan');
var ctx = mycan.getContext("2d");
ctx.strokeRect(x,y,w,h);
}
</script>
</html>

html5的canvas鼠标点击画圆的更多相关文章

  1. Jave 鼠标点击画太极 PaintTaiji (整理)

    package demo; /** * Jave 鼠标点击画太极 PaintTaiji (整理) * 声明: * 又是一份没有注释的代码,而且时间已经久远了,不过代码很短,解读起来应该 * 不会很麻烦 ...

  2. java图形化界面-------鼠标监听画圆----------使用匿名类

    package com.aa; import java.awt.Color; import java.awt.Graphics; import java.awt.event.MouseAdapter; ...

  3. canvas鼠标点击划线

    今天学习了canvas,打算写一个鼠标划线的效果. <!DOCTYPE html> <html lang="en"> <head> <me ...

  4. Canvas鼠标点击特效（富强、民主...）、收藏

    <script> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").cl ...

  5. html5使用canvas实现毫秒级画心电图

  6. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  7. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  8. Html5学习2（Html表格、Html列表、Html5新元素、Canvas （坐标、路径、画圆、文本、渐变、图像））

    Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...

  9. javascript画直线和画圆的方法（非HTML5的方法）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. RabbitMQ处理未被路由的消息

    我们经常使用消息队列进行系统之间的解耦,日志记录等等.但是有时候我们在使用 RabbitMQ时,由于exchange.bindKey.routingKey没有设置正确,导致我们发送给交换器(excha ...

  2. 小白学习C语言必背的18个经典程序

    1./*输出9*9口诀.共9行9列,i控制行,j控制列.*/ #include "stdio.h" main() {int i,j,result; for (i=1;i<10 ...

  3. 你知道怎么从jar包里获取一个文件的内容吗

    目录 背景 报错的代码 原先的写法 编写测试类 找原因 最终代码 背景 项目里需要获取一个excle文件,然后对其里的内容进行修改,这个文件在jar包里,怎么尝试都读取不成功,但是觉得肯定可以做到,因 ...

  4. tar 解压分割压缩文件

    被分割后的压缩文件必须先合并成一个压缩文件才能正常的解压. 第一步.合并压缩文件 第二步.正常解压 $ls TINA-1.3.tar.gzaa TINA-1.3.tar.gzab TINA-1.3.t ...

  5. 全志Linux Tina编译demoOmxVdec错误

    测试裸流 Making install in demoOmxVdec make[6]: Entering directory '/home/liuxueneng/WorkCode/Homlet-Tin ...

  6. c 不同类型的指针

    今天看到了一个问题:c里面,不同类型的指针是否可以互指呢?也就是不同类型的指针之间是否可以互相赋值,我想了想,对于32位机子而言,所有类型的指针都是4Byte(64位就是8Byte,这里只讨论32位) ...

  7. Python import Queue ImportError: No module named 'Queue'

    python3 中引入Queue 会报出这个问题 python3 中这样引入 import queue python2 中这样引入 import Queue 为了兼容 可以这样 import sys ...

  8. 前端---梳理 http 知识体系 1

    最近看了http相关的知识点,觉得还是有必要整理下,这样对自己的网络知识体系也有帮助. http 是什么 http叫超文本传输协议,可以拆成超文本.传输.协议来理解 协议 http 是一个用在计算机里 ...

  9. docker 使用报错的相关问题

    docker 创建本地主机实例Virtualbox 驱动报错,显示没有下载这个驱动 解决方案,下载virtuabox. https://www.cnblogs.com/effortday/p/1502 ...

  10. spring-cloud-square源码速读（retrofit + okhttp篇）

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos spring-cloud-square系列文章 五分钟 ...