使用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. 第一次博客作业 <西北师范大学| 周安伟>

     1.助教博客链接:https://home.cnblogs.com/u/zaw-315/ 2.本周点评的作业数:3份,有留言互动. 3.本周点评有困难的地方: https://www.cnblogs ...

  2. oracle 按表数据新增一行

    在功能实现时,能尽量用一个sql语句直接实现业务逻辑的话,就不要去写C#代码,便于维护. 以下sql的逻辑是:给明细表新增一条数据,前提是传入的债券代码存在与债券表,否则不新增.此sql返回受影响行数 ...

  3. （5）Linux权限管理

    1.文件权限 2.1)文件类型 d:目录    -:文件    l:链接文件    b:可以存储的接口设备    c:串行端口设备(键盘,鼠标) 2)文件属性 接下来的九个字符以三个为一组分别是 rw ...

  4. linux之systemd---学习

    linux 操作系统的启动首先从 BIOS 开始,接下来进入 boot loader,由 bootloader 载入内核,进行内核初始化.内核初始化的最后一步就是启动 PID 为 1 的 init 进 ...

  5. 《Java从入门到精通》学习总结3

    1. 3种构成重载的条件: 参数类型不同.参数个数不同.参数顺序不同 只有返回值类型不同并不足以区分两个方法的重载. 2. import关键字除了导入包之外,还可以导入静态成员,这是JDK 5.0以上 ...

  6. Problem Description——用c语言实现素数的判定

    Problem Description 对于表达式n^2+n+41,当n在(x,y)范围内取整数值时(包括x,y)(-39<=x<y<=50),判定该表达式的值是否都为素数. Inp ...

  7. Linux平台生成awr报告

    1．使用oracle用户登录应用服务器所使用的数据库所在的服务器 # su –oracle 2．输入env命令,查询出ORACLE_HOME 目录 3．然后进入$ORACLE_HOME/rdbms/a ...

  8. apache ab 结果Failed requests探究

    Failed requests: 537 (Connect: 0, Receive: 3, Length: 268, Exceptions: 266) Receive:当客户端connect成功后,并 ...

  9. java中的 java.util.concurrent.locks.ReentrantLock类的使用方式

    实现了lock的类为:ReentrantLock 接口的方式解释: lock()方法为获取锁对象,如果未获取到锁就一直获取锁. trylock():为布尔值,返回是否获取到了锁,如果没有获取到锁则返回 ...

  10. IE 11和const的兼容问题

    说好的IE11兼容javascript中的常量类型 const 呢 ?可能并没有完全兼容 项目中遇到一个问题,采用google浏览器访问没问题,在本地jetty启动,IE11也可以正常访问,然而当我将 ...