<!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. 力扣 - 剑指 Offer 57. 和为s的两个数字

    题目 剑指 Offer 57. 和为s的两个数字 思路1(哈希表) 这题首先想到的是使用两个for遍历,查找是哪两个相加等于target,但是时间复杂度确实\(O(N^2)\),时间复杂度太高,因此我 ...

  2. RMQ、ST表

    ST表 \(\text{ST}\) 表是用于解决可重复贡献问题的数据结构. 可重复贡献问题:区间按位和.区间按位或.区间 \(\gcd\) .区间最大.区间最小等满足结合律且可重复统计的问题. 模板预 ...

  3. hdfs基本操作命令

    hdfs文件的相关操作主要使用hadoop fs.hadoop dfs.hdfs dfs 命令,以下对最常用的相关命令进行简要说明. hadoop fs -ls  显示当前目录结构,-ls -R 递归 ...

  4. eclipse配置Tomcat和Tomcat出现无效端口解决办法

    一.eclipse配置Tomcat 1. 按图选择window-preferences 2在server处选择runtime environment . 3.点击右侧add,选择自己的Tomcat版本 ...

  5. Linux下向windows传输文件【sz 文件】没有弹框提示下载到什么位置

    Linux环境向windows环境传输文件 security crt工具,同同一个软件,连接不同服务器,有的服务器传送文件没有弹框选择要下载的文件路径,可以在[Options]-[Session Op ...

  6. Linux wget 命令 使用总结

    简介 wget命令用来从指定的URL下载文件.wget非常稳定,它在带宽很窄的情况下和不稳定网络中有很强的适应性,如果是由于网络的原因下载失败,wget会不断的尝试,直到整个文件下载完毕.如果是服务器 ...

  7. 使用silky脚手架构建微服务应用

    目录 模板简介 构建独立应用的模板Silky.App.Template 构建模块化应用的模板Silky.Module.Template 开源地址 在线文档 模板简介 使用 dotnet new 命令可 ...

  8. Loadrunner12的下载和安装

    工作需要,学起来 第一部分:安装 一.在惠普官网下载Loadrunner12安装包.下载下来将会有四个安装包. HP_LoadRunner_12.02_Community_Edition_Additi ...

  9. List of devices attached 没有手机设备号 解决办法

    问题: cmd下使用adb devices 没有找到手机设备,如下图 解决办法: 采用360手机助手给我们自动安装对应的手机驱动,或者去对应的手机官网下载对应的驱动,这里手机要开启调试模式 我是opp ...

  10. 服务端渲染技术NUXT

    什么是服务端渲染 ​ 服务端渲染又称SSR (Server Side Render),是在服务端完成页面的内容,而不是在客户端通过AJAX获取数据. 服务器端渲染(SSR)的优势主要在于:更好的 SE ...