JS canvas标签动态绘制图型
使用canvas标签动态绘制图型,当点击鼠标时,以鼠标点击的坐标作为图形中心点。当点击数为偶数时画三角形,当点击数为奇数时画五角星
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css"></style>
<script type="text/javascript">
var g=0;
function getStyles(obj) {
return document.defaultView.getComputedStyle(obj);
}
function getCanvasPos(canvas,e) { //获取鼠标在canvas上的坐标
var rect = canvas.getBoundingClientRect();
var leftB = parseInt(getStyles(canvas).borderLeftWidth);//获取的是样式,需要转换为数值
var topB = parseInt(getStyles(canvas).borderTopWidth);
return {
x: (e.clientX - rect.left) - leftB,
y: (e.clientY - rect.top) - topB
};
}
function drawStar(context, r, R, x, y) { // 画五角星
context.beginPath();
for(var i=0;i<5;i++){
context.lineTo(Math.cos((18+i*75)/180*Math.PI)*R+x,-Math.sin((18+i*75)/180*Math.PI)*R+y);
context.lineTo(Math.cos((54+i*75)/180*Math.PI)*r+x,-Math.sin((54+i*75)/180*Math.PI)*r+y);
}
context.closePath();
context.stroke();
context.fill();
}
function drawsan(context,r,x,y){ // 画三角形
context.beginPath();
context.moveTo(x,y-r);
context.lineTo(Math.cos( 320/180*Math.PI )*r+x,Math.sin(40/180*Math.PI )*r+y);
context.lineTo(Math.cos( 210/180*Math.PI )*r+x,Math.sin(40/180*Math.PI )*r+y);
context.closePath();
context.stroke();
context.fill();
}
function draw(e) {
g++;
var mycanvas=document.getElementById('mycanvas');
var context=mycanvas.getContext('2d');
context.clearRect(0,0,mycanvas.width,mycanvas.height);
context.strokeStyle="powderblue";
context.fillStyle="powderblue";
if(g%2==0){
drawsan(context, 30, getCanvasPos(mycanvas,e).x, getCanvasPos(mycanvas,e).y);
}
else{
drawStar(context,25,50,getCanvasPos(mycanvas,e).x,getCanvasPos(mycanvas,e).y);
}
}
</script>
</head>
<body>
<div onmousedown="draw(event)">
<canvas width="600px" height="400px" style="border: 1px solid black;" id="mycanvas"></canvas>
</div>
</body>
</html>
JS canvas标签动态绘制图型的更多相关文章
- JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值
//**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 原生js怎么为动态生成的标签添加各种事件
这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...
- JS动态引入js、CSS动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...
- canvas绘制饼型图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5新增Canvas标签及对应属性、API详解(基础一)
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
- canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球
从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...
- html5之canvas困惑 在canvas标签内需要设置了宽跟高,如果在css中设置同样的宽跟高,画出来的图像变形了?
<canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...
- [canvas]通过动态生成像素点做绚丽效果
本例中的粒子就是实实在在的像素,由js代码在canvas上动态生成的像素点!这些像素点通过一个运动方法有规律地动了起来.透过这个思路,我们可以想到很多很炫的效果,但是这个性能有待考察.实验证明,动态控 ...
随机推荐
- Hadoop2.7.7_HA高可用部署
1. Hadoop的HA机制 前言:正式引入HA机制是从hadoop2.0开始,之前的版本中没有HA机制 1.1. HA的运作机制 (1)hadoop-HA集群运作机制介绍 所谓HA,即高可用(7*2 ...
- 题目--统计一行文本的单词个数(PTA预习题)
PTA预习题——统计一行文本的单词个数 7-1 统计一行文本的单词个数 (15 分) 本题目要求编写程序统计一行字符中单词的个数.所谓“单词”是指连续不含空格的字符串,各单词之间用空格分隔,空格数可以 ...
- 20-matlab全排列-函数调用
matlab中global的用法 Matlab 中子函数不传参直接调用主函数global变量方法 在一个m文件里要调用一个函数(自定义的),但是我希望这个函数能利用并修改workspace中的变量( ...
- NOIP2018游记(划掉) 滚粗记
Day0 早上摸鱼~, 打几个板子就颓废 中午出发, 在火车上颓元气+睡觉. 到了宾馆发现yhx已经帮我们拿了袋子和狗牌,于是上楼欢乐地搓起了六家统, 一直搓到10点钟才回自己房间. 有六家统就有快乐 ...
- python基础之Day23
1.封装 什么是? 封:明确地把属性隐藏起来 ,对外隐藏,对内开放 申请名称空间,往里面装入一系列名字 /属性(类比 类 和对象 只是装的概念) 为什么要用? __init__往对象里丢属性 封装 ...
- java中函数的参数传递
转载 https://www.cnblogs.com/lixiaolun/p/4311863.html 转载https://www.cnblogs.com/wutianqi/p/8723582.ht ...
- poj 3126 Prime Path bfs
题目链接:http://poj.org/problem?id=3126 Prime Path Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
- Open quote is expected for attribute "{1}" associated with an element type "column".
这个的错误的意思很简单:就是自己的配置文件是否缺少""号
- AJAX随笔2
Ajax作用: 是用JavaScript向服务器发送异步请求,然后服务器给出响应,然后以XML格式的文件返回给浏览器端! 异步: 当浏览器向服务器发送请求的时候,不是整个页面刷新,而是局部刷新[局部信 ...
- Atcoder Beginner Contest 070 D - Transit Tree Path
题意:n个点,n-1条边,组成一个无向的联通图,然后给出q和k,q次询问,每次给出两个点,问这两个点之间的最短距离但必须经过k点. 思路:我当时是用优化的Dijkstra写的(当天刚学的),求出k点到 ...