canvas小图123

1 绘制扇形图

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

    <title></title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        div{

            width: 600px;

            height: 600px;

            margin:30px auto;

            border:1px solid orange;

        }

    </style>

</head>

<body>

    <div>

        <canvas id="canvas"></canvas>

    </div>

<script type="text/javascript">

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    canvas.width = 600;

    canvas.height = 600;

    var data = [

        {

            value:0.6,

            color:"lightcoral",

            text:"记者"

        },{

            value:0.1,

            color:"lightblue",

            text:"naive"

        },{

            value:0.1,

            color:"lightgreen",

            text:"simple"

        },{

            value:0.2,

            color:"darkgray",

            text:"跑得快"

        }

    ];

    //先画一个扇形

    //圆心就是300  300

    //半径就是200

    //start = 0 ,end = Math.PI*2*0.2

    //我们的文字放置位置

    //x=300+200*Math.cos(0.1*Math.PI*2)

    //y=300+200*Math.sin(0.1*Math.PI*2)

    // ctx.textAlign ="left";

    // ctx.textBaseLine = "top";

    var start=0;

    var end = 0;

    var text = 0;

    var r = 200;

    for(var i=0;i<data.length;i++){

        ctx.beginPath();

        ctx.moveTo(300,300);

        end = start+data[i].value*2*Math.PI;

        ctx.arc(300,300,r,start,end);

        ctx.closePath();

        ctx.fillStyle=data[i].color;

        ctx.fill();

        ctx.stroke();

        // ctx.font="16px 微软雅黑";

        text = start + data[i].value/2*2*Math.PI;

        var x = 300+r*Math.cos(text);

        var y = 300+r*Math.sin(text);

        if(x>300){

            ctx.textAlign="start";

            // x=x+10;

        }else{

            ctx.textAlign="end";

            // x=x-10;

        }

        if(y>300){

            ctx.textBaseLine = "top";

            y=y+10;

        }else{

            ctx.textBaseLine = "bottom";

            // y=y-10

        }

        ctx.fillText(data[i].text,x,y);

        start = end;

    }

</script>

</body>

</html>

//动图版

  var start = 0;

    var end = 0;

    var p = Math.PI*2;

    var i=0;

    function animate(){

        ctx.beginPath();

        var flag = 0;

        canvas.timer = setInterval(function(){

            flag++;

            ctx.moveTo(300,300);

            end = start+ flag/100*p;

            ctx.arc(300,300,200,start,end);

            ctx.fillStyle=data[i].color;

            ctx.fill();

            if(flag==data[i].value*100){

                clearInterval(canvas.timer);

                ctx.closePath();

                start = end;

                i++;

                if(i<data.length){

                    animate();

                }

            }

        },1000/60)

    }

    animate()

2 小光点

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>绘制彩色光点</title>

</head>

<body>

<canvas id="canvas">

</canvas>

<script type="text/javascript">

    var canvas = document.getElementById("canvas");//获得画布

    var ctx = canvas.getContext("2d");//得到canvas的上下文对象（获得画布控制权）

    canvas.width = 500;

    canvas.height= 500;

    canvas.style.background = "white";

    canvas.style.border = "1px solid darkgray";

    canvas.style.position="relative";

    canvas.style.left="400px";

    canvas.onmousedown=function(e){

        var x = e.clientX;

        var y = e.clientY+this.offsetTop;

            canvas.onmousemove=function(e){

                var moveX = e.clientX;

                var moveY = e.clientY+this.offsetTop;

                ctx.beginPath();

                ctx.arc(x-this.offsetLeft,y,moveX-x,2*Math.PI,false);

                ctx.closePath();

                var color = "rgba("+Math.ceil(Math.random()*255)+","+Math.ceil(Math.random()*255)+","+Math.ceil(Math.random()*255)+",1)";

                ctx.fillStyle = color;

                ctx.fill();

            }

            canvas.onmouseup=function(){

                canvas.onmousemove =null;

            }

    }

</script>

</body>

</html>

3 刮奖功能

刮出一个谢就可以，何必要把谢谢惠顾四个字都刮出来才肯放手呢

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>擦除效果</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        div{

            width: 500px;

            margin:50px auto;

            /*border:1px solid #ccc;*/

           background-image: url(img/starks.jpg);

        }

    </style>

</head>

<body>

<div>

    <canvas id="canvas">

    </canvas>

</div>

<script type="text/javascript">

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    canvas.width = 500;

    canvas.height= 500;

    ctx.fillRect(0, 0, 500, 500)

    //擦除功能：手动（通过鼠标拖放）绘制一个矩形，绘制出的矩形里面的内容被清除

    canvas.onmousedown=function(e){

        var e = e ||window.event;

        // console.log(e);

        if(e.button==0){

            var startX = e.clientX - canvas.offsetLeft;

            var startY = e.clientY - canvas.offsetTop;

            // console.log(canvas.offsetTop)

            canvas.onmousemove=function(e){

                var e = e ||window.event;

                var endX = e.clientX - canvas.offsetLeft;

                var endY = e.clientY - canvas.offsetTop;

                var width = endX- startX;

                var height = endY - startY ;

                ctx.clearRect(startX,startY,width,height);

            }

            canvas.onmouseup=function(){

                if(e.button==0){

                    canvas.onmousemove=null;

                }

            }

        }

    }

</script>

</body>

</html>

canvas小图123的更多相关文章

[原]Wpf应用Path路径绘制圆弧
1. 移动指令:Move Command(M):M 起始点或者:m 起始点比如:M 100,240或m 100,240使用大写M时,表示绝对值; 使用小写m时; 表示相对于前一点的值,如果前一点没 ...
modernizr.js
1.判断浏览器是否支持 h5 if(Modernizr.canvas){ alert(123); }else{ alert(321); } 2.判断浏览器是否支持 canvas function su ...
WPF图片浏览器（显示大图、小图等）
原文:WPF图片浏览器(显示大图.小图等) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wangshubo1989/article/details ...
伙伴们休息啦canvas绘图夜空小屋
HTML5 canvas绘图夜空小屋伙伴们园友们,夜深了,休息啦,好人好梦... 查看效果:http://hovertree.com/texiao/html5/28/ 效果图如下: 代码如下: &l ...
canvas简介
一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...
用HTML5 CANVAS做自定义路径的动态效果图片！
最近对HTML5开始感兴趣了,实现的效果如下图,大家可以从代码里换掉图片我用的是canvas里面的2d绘图,其中上图的路径是网上在线绘制的,我太懒了,哈哈下面是网址: http://www.vic ...
使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
canvas转盘抽奖
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...

随机推荐

axios常见传参方式
1:get请求一般发送请求是这么写 axios.get('/user?id=12345&name=user') .then(function (res) { console.log(res) ...
hello spring boot neo4j
新建springboot 项目: https://www.cnblogs.com/lcplcpjava/p/7406253.html bug fixs: 1. Maven Configuration ...
Log错误日志级别
日志记录器(Logger)的级别顺序: 分为OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALL或者您定义的级别.Log4j建议只使用四个级别,优先级从高到低分别是 ERR ...
.net core IdentityServer4 使用query参数
基本用法请参考官方文档:https://identityserver4.readthedocs.io/en/latest/index.html 这里不对具体用法进行说明,一般情况下,Startup添加 ...
JZOJ 3462. 【NOIP2013模拟联考5】休息(rest)
3462. [NOIP2013模拟联考5]休息(rest) (Standard IO) Time Limits: 1000 ms Memory Limits: 262144 KB Detailed ...
python编写登录接口
要求: 输入用户名密码认证成功显示欢迎信息输错三次以后锁定代码如下: # Author:YKwhile(True): select=input('请问是注册还是登录') if selec ...
使用HTTP协议访问网络
在Android上发送http请求有2种方式,分别由两个类完成,HttpURLConnection和HttpClient. 一.使用HttpURLConnection方式 1.1 建立连接的基本步骤 ...
Terrorist’s destroy HDU - 4679
Terrorist’s destroy HDU - 4679 There is a city which is built like a tree.A terrorist wants to destr ...
loj2073 「JSOI2016」扭动的回文串
ref 主要是要理解"撑到"最长这个概念 (为啥我的代码这么长QAQ #include <iostream> #include <cstdio> using ...
luogu4169 [Violet]天使玩偶/SJY摆棋子 / bzoj2648 SJY摆棋子 k-d tree
k-d tree + 重构的思想,就能卡过luogu和bzoj啦orz #include <algorithm> #include <iostream> #include &l ...

canvas小图123

canvas小图123的更多相关文章

随机推荐

热门专题