<!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. dwr简单应用及一个反向ajax消息推送

    由于项目中最近需要用到dwr实现一些功能,因此在网上和dwr官网上找了一些资料进行学习.在此记录一下.(此处实现简单的dwr应用和dwr消息反向推送) 一.引入dwr的包 <dependency ...

  2. 色彩滤镜矩阵（Color Filter Array）

    数码相机上的每个象素都带有一个光感应器,用以测量光线的明亮程度.由于光电二极管是只支持单颜色的装置,它不能区别不同波长的光线.因此,数码相机工程师在相机感应器的上部装上了一套镶嵌式的颜色滤镜,一个颜色 ...

  3. C语言中都有哪些常见的数据结构你都知道几个？？

    上次在面试时被面试官问到学了哪些数据结构,那时简单答了栈.队列/(ㄒoㄒ)/~~其它就都想不起来了,今天有空整理了一下几种常见的数据结构,原来我们学过的数据结构有这么多~ 首先,先来回顾下C语言中常见 ...

  4. [LGP1866]编号

    传送门 题意:找n个数,使得 $ 1 \leq a_i \leq Maxnumber_i $ 求有多少种组合 这题我们可以看到,还有一种无解的情况 我们可以先判断无解的情况 首先把Maxnumber数 ...

  5. arm开发板上找不到/dev/i2c-*设备

    最近在调试arm与外设iic通讯是,想来个投机取巧,先不写单独的驱动,直接通过iic bus设备是否可以连接到外设,然后发现在板子上找不到"/dev/i2c-n"的设备,标准的系统 ...

  6. Luogu P1297 [国家集训队]单选错位 | 概率与期望

    题目链接 题解: 单独考虑每一道题目对答案的贡献. 设$g_i$表示gx在第$i$道题目的答案是否正确(1表示正确,0表示不正确),则$P(g_i=1)$表示gx在第$i$道题目的答案正确的概率. 我 ...

  7. 王爽汇编第十章,call和ret指令

    目录 王爽汇编第十章,call和ret指令 call和ret指令概述: ret和retf ret指令 retf指令 call 和 ret 的配合使用 call指令详解 call原理 call指令所有写 ...

  8. C++实现一个SOAP客户端

    目录 简介 实现客户端 准备xml文件 引入库文件 构建请求数据的xml 执行Http协议的POST方法 解析响应数据的xml 测试客户端 附件 简介 在C++中,一般使用gSOAP来实现客户端.服务 ...

  9. mysql数据库导入导出文件sql文件

    window下 1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 mysqldump -u dbuser -p dbname > dbname.sql ...

  10. .net core 和 WPF 开发升讯威在线客服系统：把 .Net Framework 打包进安装程序

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程. 系列文章目录: https://blog.shengxunwei.com/Home/Post/44a3 ...