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

随机推荐

mysql 5.7 编译安装脚本。
此脚本尽量运行在centos 服务器上面,用于编译安装mysql 5.7 将此脚本和相应的软件都放到/usr/local/src 目录下面由于不能上传附件所以需要把cmake-3.9.6.ta ...
python3 提成计算
题目企业发放的奖金根据利润提成. 利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%: 20万到4 ...
[Python]有关pygame库中的flip和update的区别
pygame.display.flip()和pygame.display.update()的用法上的区别: 资料一. 资料二. (资料最后更新时间:2019年1月9日)
使用jieba和wordcloud进行中文分词并生成《悲伤逆流成河》词云
因为词云有利于体现文本信息,所以我就将那天无聊时爬取的<悲伤逆流成河>的评论处理了一下,生成了词云. 关于爬取影评的爬虫大概长这个样子(实际上是没有爬完的): #!/usr/bin/env ...
自动发现项目中的URL，django1版本和django2版本
一.django 1 版本 routers.py import re from collections import OrderedDict from django.conf import setti ...
Kilani and the Game CodeForces - 1105D （bfs）
Kilani is playing a game with his friends. This game can be represented as a grid of size n×mn×m, wh ...
6 json和ajax传递api数据
1 2 3 4 https://swapi.co/ <h1>Hello Reqwest!</h1> <script> var a = {} reqwest({ ur ...
3 View - 状态保持 session
1.状态保持 http协议是无状态的:每次请求都是一次新的请求,不会记得之前通信的状态客户端与服务器端的一次通信,就是一次会话实现状态保持的方式:在客户端或服务器端存储与会话有关的数据存储方式包 ...
Redis实现之数据库（三）
过期键删除策略在Redis实现之数据库(二)一小节中,我们知道了数据库键的过期时间都保存在过期字典中,又知道了如果根据过期时间去判断一个键是否过期,现在剩下的问题是:如果一个键过期了,那么它什么时候 ...
springboot(七)：springboot+mybatis多数据源最简解决方案
说起多数据源,一般都来解决那些问题呢,主从模式或者业务比较复杂需要连接不同的分库来支持业务.我们项目是后者的模式,网上找了很多,大都是根据jpa来做多数据源解决方案,要不就是老的spring多数据源解 ...

canvas小图123

canvas小图123的更多相关文章

随机推荐

热门专题