使用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. HTML中<script>的defer属性与async属性

    defer 属性会在 DOMLoaded 事件之前完成异步加载,加载不会阻塞 DOM 解析,并且 script 的顺序会按照 DOM 中的顺序加载. async 属性就是异步加载,没有什么顺序的保证.

  2. Python设计模式 - UML - 状态图(State Machine Diagram)

    简介 状态图主要用于描述对象在其生命周期中各种状态.状态之间的转换过程.触发状态转换的各种事件(条件)及执行的动作. 状态图构建步骤 - 找出适合用状态图描述的类.确定类中需要做状态图的重要对象 - ...

  3. [剑指Offer]60-n个骰子的点数

    题意 输入骰子个数n,打印出所有骰子朝上的点的点数之和,及对应的概率. 题解 循环. n个骰子,点数之和在n~6n范围内.计算n个骰子扔出和为m的情况数,等于n-1个骰子扔出m-1,m-2...m-6 ...

  4. Winform 时间

    using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawi ...

  5. systemd 编写服务管理脚本---学习

    转载:https://www.cnblogs.com/sparkdev/p/8521812.html 我们运行 linux 服务器的主要目的是通过运行程序提供服务,比如 mysql.web serve ...

  6. redis各类错误可能的解决方案

    .报Timeout performing EVAL 这个可能是连到读库从库了,直接改成写库就没问题了. 2. 各种ConnectTimeout 一般是偶尔或经常就超时,这种情况,找了各种回答,最后在s ...

  7. vue父子组件实现v-model

    话不多说,直接上代码 <div id="app"> <price-input v-bind:value="price" v-on:input= ...

  8. 从Excel获取请求体

    Excel文件 .py文件---------------------- import xlrdimport re def fetch_body(path,sheet,name,adict):     ...

  9. 关于egg.js的安全延伸思考

    我看到全部的安全基于围绕http来操作,那么如果我只用websocket传输数据,是不是就会好很多?

  10. parseInt ,parseDouble,parseFloat

    转载https://www.cnblogs.com/originate918/p/6377616.html