<!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. 万维网www与HTTP协议

    文章转自:https://blog.csdn.net/weixin_43914604/article/details/105901440 学习课程:<2019王道考研计算机网络> 学习目的 ...

  2. Balance的数学思想构造辅助函数

    本类题的证明难点便在于如何构造出满足答案的辅助函数.通过下列类题便可以很好的理解. 题一 该类题可以理解为积分内部f(x)与xf(x)处于一种失衡状态,故我们需要使其平衡,否则直接构造出的函数无法满足 ...

  3. 面试官问：说说你对Java函数式编程的理解

    常见的面试问题 总结一下,在Java程序员的面试中,经常会被问到类似这样的问题: Java中的函数式接口是什么意思? 注解 @FunctionalInterface 的作用是什么? 实现一个函数式接口 ...

  4. ubuntu 编译C++ error: ‘syscall’ was not declared in this scope

    明明已经加了头文件 #include <sys/syscall.h> #include <sched.h> #include <sys/resource.h> 编译 ...

  5. Zabbix 4.4 离线安装 使用mariadb的踩坑，无法停止服务

    先分享一个网站,之前就没注意过有这个网站,不知道是啥时候开放的.里面分享了N多zabbix的模板. https://share.zabbix.com/ 报错如下 Unsupported charset ...

  6. java中的泛型设计

    1.为什么要使用泛型程序设计 ArrayList<String> files = new ArrayList<>() 等价于 var files = new ArrayList ...

  7. ansible模块及语法

    常用模块详解 模块说明及示例: 1.ping模块ping模块 主要用于判断远程客户端是否在线,用于ping本身服务器,返回值是changed.ping示例 ansible clu -m ping 2. ...

  8. 热门剧本杀与 SaaS 的不解之缘

    近年来,"剧本杀"这种以剧本为核心,玩家分别扮演不同角色推理案情找出真凶的娱乐项目在年轻人的范围内迅速传开,已悄然形成了一个市场规模超百亿的新兴产业,吸引了大量淘金者.而在互联网时 ...

  9. Maven 问题 Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:3.0.0-M1 的处理

    一.问题描述 Maven项目报错,该项目是导入的项目,然后再通过开发工具打开项目时,pom.xml文件报错. 并且新建Maven Project 也会报错. 二.报错详细Failure to tran ...

  10. 手把手教你学Dapr - 5. 状态管理

    上一篇:手把手教你学Dapr - 4. 服务调用 介绍 使用状态管理,您的应用程序可以将数据作为键/值对存储在支持的状态存储中. 您的应用程序可以使用 Dapr 的状态管理 API 使用状态存储组件来 ...