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" ...

随机推荐

Bootstrap 警告框(Alert)插件
警告消息大多来是用来向终端用户提示警告或确认的消息,使用警告框插件,您可以向所有的警告框消息添加取消功能. 用法您有以下两种方式启用警告框的可取消功能. 1.通过data属性:通过数据添加可取消功能 ...
oc字符串截取数组字典运用
#define NSLog(FORMAT, ...) printf("%s\n", [[NSString stringWithFormat:FORMAT, ##__VA_ARGS_ ...
C++ 限定名称查找
限定名称查找规则实际归纳下来很简单,先对::左边的名称进行查找(遵循,限定,无限定),然后在左边查找到的(此时只查找类型名称)名字的作用域内(含内联名称空间件)查找右边出现的名字,查找到即存在(故可以 ...
学习 KMP 算法
KMP 算法是用来处理字符串匹配问题的.也就是给你两个字符串,你需要回答:B 串是否是 A 串的子串(或 B 串在 A 串中出现的位置).比如,字符串 A = “ i am student ”, 字符 ...
c++运算符重载和虚函数
运算符重载与虚函数单目运算符接下来都以AClass作为一个类例子介绍 AClass{ int var } 区分后置++与前置++ AClass operator ++ () ++前置一般设计为返 ...
大数据的存储——HBase、HIVE、MYSQL数据库学习笔记
HBase 1.hbase为查询而生,它通过组织机器的内存,提供一个超大的内存hash表,它需要组织自己的数据结构,表在hbase中是物理表,而不是逻辑表,搜索引擎用它来存储索引,以满足实时查询的需求 ...
JavaScript 字符串分行、Return 语句使用注意事项
JavaScript 字符串分行 JavaScript 允许我们在字符串中使用断行语句: var x ="Hello World!"; 但是,在字符串中直接使用回车换行是会报错的: ...
用描述符实现缓存功能和property实现原理
class Lazyproperty: def __init__(self, func): self.func = func def __get__(self, instance, owner): p ...
oracle 事务第二弹
一数据库版本 SYS@LEO1>select* from v$version; BANNER ------------------------------------------------- ...
PAT Advanced 1001
1001 A+B Format (20 分) Calculate a+b and output the sum in standard format -- that is, the digits mu ...

canvas小图123

canvas小图123的更多相关文章

随机推荐

热门专题