使用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标签动态绘制图型的更多相关文章

  1. JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值

    //**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...

  2. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  3. 原生js怎么为动态生成的标签添加各种事件

    这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom ...

  4. JS动态引入js、CSS动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...

  5. canvas绘制饼型图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  7. canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球

    从网上扒拉的代码,敲了敲代码玩. html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了 <!DOCTYPE html> <html> <hea ...

  8. html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  9. [canvas]通过动态生成像素点做绚丽效果

    本例中的粒子就是实实在在的像素,由js代码在canvas上动态生成的像素点!这些像素点通过一个运动方法有规律地动了起来.透过这个思路,我们可以想到很多很炫的效果,但是这个性能有待考察.实验证明,动态控 ...

随机推荐

  1. 企业BGP网络规划案例（三）

    路由选路 1.分支的办公流和生产流默认走联通MSTP线路,DC流默认走电信MSTP线路,当其中某条互联的链路down后才会进行流量切换 XRV1配置 ========================= ...

  2. 手工脱壳之FSG压缩壳-IAT表修复

    目录 一.工具及壳介绍 二.脱壳 2.1.单步跟踪脱壳 2.2.IAT修复 三.程序脱壳后运行截图 四.个人总结 五.附件 一.工具及壳介绍 使用工具:Ollydbg.PEID.ImportREC.L ...

  3. redis常用服务安装部署

    常用服务安装部署   学了前面的Linux基础,想必童鞋们是不是更感兴趣了?接下来就学习常用服务部署吧! 安装环境: centos7 + vmware + xshell 即将登场的是: mysql(m ...

  4. server 打开失败

    server:An unexpected exception was thrown. 当server服务器遇到这样遇到不能料想的错误导致打开失败的情况下,我们可以找到一个com.genuitec.ec ...

  5. Redhat 7 开通防火墙端口

    1.查看防火墙状态,root用户登录,执行命令systemctl status firewalld 2.开启防火墙:systemctl start firewalld 3.关闭防火墙:systemct ...

  6. HTTPie命令介绍

    HTTPie 是一个 HTTP 的命令行客户端.其目标是让 CLI 和 web 服务之间的交互尽可能的人性化.HTTPie 可用于与 HTTP 服务器做测试.调试和常规交互. 1 定制 HTTP 方法 ...

  7. 使用Jmeter进行http接口做功能、性能测试

    在测试移动APP时,会有很多接口需要做测试,我在这里介绍一下对HTTP接口做功能.性能的测试.首先我们会从开发人员拿到接口数据.     一.测试需求描述 1. 本次测试的接口为http服务端接口 2 ...

  8. Java：Copy-On-Write容器

    Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这个内容的时候,才会真正把内容Copy出去形成一个新的内容然后再改, ...

  9. JAVA中执行JavaScript代码并获取返回值

    JAVA中执行JavaScript代码并获取返回值 场景描述 实现思路 技术要点 代码实现 测试方法 运行结果 改进空间 场景描述 今天在CSDN上偶然看到一个帖子对于一段字符串 “var p=‘xx ...

  10. Nikto学习点

    一.使用Nikto扫描https站点 nikto.pl -output myhost.html -g -ssl -Format HTM -host www.test.com -port 443 二.使 ...