使用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. 深度学习项目——基于循环神经网络（RNN）的智能聊天机器人系统

    基于循环神经网络(RNN)的智能聊天机器人系统 本设计研究智能聊天机器人技术,基于循环神经网络构建了一套智能聊天机器人系统,系统将由以下几个部分构成:制作问答聊天数据集.RNN神经网络搭建.seq2s ...

  2. Month format:number to English abbre

    ``` DATA LV_MONTH TYPE FCKTX. CLEAR:LV_MONTH,lv_date. SELECT SINGLE KTX INTO LV_MONTH FROM T247 WHER ...

  3. hive上传下载数据

    ------------------------------------------read me--方式1:适用于工具传输--方式2:适用于手动临时性传输---------------------- ...

  4. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. sort排序在苹果与安卓端不一致问题

    一.问题 在使用sort排序时,若遇到相同数据或非数值数据时,会出现苹果手机与安卓手机排序不一致问题 var arr = [{ "id": "52", &quo ...

  6. 《Oracle查询优化改写技巧与案例》学习笔记-------使用数字篇

    一个系列的读书笔记,读的书是有教无类和落落两位老师编写的<Oracle查询优化改写技巧与案例>. 用这个系列的读书笔记来督促自己学习Oracle,同时,对于其中一些内容,希望大家看到以后, ...

  7. 递归求6的阶乘（考虑int类型溢出）

    编码 public class Factorial { public static void main(String[] args) { System.out.println(fac(6)); } p ...

  8. Learning to Promote Saliency Detectors

    Learning to Promote Saliency Detectors 原本放在了思否上, 但是公式支持不好, csdn广告太多, 在博客园/掘金上发一下 https://github.com/ ...

  9. node,Yeoman,Bower,Grunt的简介及安装

    作为前端,基本的html,css,js已经不太够用了,所以要学习一些前端自动化工具,来提高我们的生产力 1.NodeJS 先安装NodeJS,直接去官网,下载最新的版本,一定要最新的版本,这样会避免很 ...

  10. php实现下载模板与上传模板解析

    <? //下载模板的请求 if(isset($_GET['action']) && $_GET['action'] =='down_group_excel'){ $code = ...