使用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. freeswitch 使用info显示的通道变量

    2019-01-20 11:57:30.167311 [INFO] mod_dptools.c:1743 CHANNEL_DATA:Channel-State: [CS_EXECUTE]Channel ...

  2. Linux 使用nmcli配置网络

    Linux 使用nmcli配置网络 前提: 在虚拟机中添加一张桥接模式的网卡,如果是VirtualBox虚拟机中要shutdown才能添加. 1.启动NetworkManager工具,安装nmcli命 ...

  3. Ubuntu16.04 藍牙連上,但是聲音裏面找不到設備

    解決辦法: 1. sudo apt-get install blueman bluez* 2. sudo vim /etc/pulse/default.pa 注釋掉下面的代碼: #.ifexists ...

  4. Babel 6 概述

    babel-core 只转换语法(如箭头函数) babel-polyfill 由core-js和regenerator runtime组成. 1 core-js用来支持新的全局变量(例如 Promis ...

  5. shell的 ls命令

    Linux下shell 的 ls 命令 ls -d 显示当前目录的上层目录,不显示子目录 ls -a 显示当前目录下的所有子目录,包括隐藏的文件 ls -l 显示当前目录下所有文件的所有信息(除隐藏文 ...

  6. python 基础 ----- 变量

    ------  python注释 注释的作用:代码提示,运行时忽略不必要的代码 注释的三种方式: 1.“#” 单行注释 2.多行注释   三个单引号  和三个双引号都可以 注释的快捷键 Ctrl + ...

  7. ROS零门槛学渣教程系列（二）——Linux常用指令：mkdir、tar、 unzip、cp、scp、mv、rm、find、apt、ssh

    Linux常用指令通过上一教程,我们获得了ubuntu系统.Linux是一个很大的领域.但不要紧张,我们一步步来就是了,跟着教程,需要能用到新知识,会提前介绍给大家.下面学习几个常用的Linux指令. ...

  8. Python读取excel表的数据

    from openpyxl.reader.excel import load_workbook #读取xlsx文件def readExcelFile(path): dic={} #打开文件 file= ...

  9. 微信小程序覆盖自定义组件样式

    小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp. ...

  10. ionic3问题记录

    1.Ionic3 websocket 启动没问题,编译的时候报错 events.js:136thrower;// Unhandled 'error' event^Error: read ECONNRE ...