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派生表(derived)优化一例
1.什么是派生表derived 关键字:子查询–>在From后where前的子查询 mysql; +----+-------------+------------+------+-------- ...
oc字典
#import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...
JS - OOP-继承的最佳实现方式
如上图,使用第三种方式实现继承最好,也就是加了下划线的. 但是Object.create方法是ES6才支持的,所以,右边就写了一个实现其同样功能的函数.
Python 正则表达式匹配次数
管道可以匹配多个正则表达式中的一个 >>> >>> m=re.search(r'Batman|Tina Fey','Batman and Tina Fey')> ...
jupyter notebook（二）——修改jupyter打开默认的工作目录
1.简述 jupyter notebook,启动后,浏览器发现工作目录并不是自己真正的代码的工作路径.所以需要设置一下.这样方便自己快捷使用. 2.设置修改jupyter notebook打开后默认工 ...
java的重写(Override) (2013-10-11-163 写的日志迁移
/* *说明方法的重写(又称方法的覆盖)子类并不想原封不动地继承父类的方法,而是想作一定的修改 */ package czbk.jxy.study; /** * @author Archon * @d ...
Leetcode 700. 二叉搜索树中的搜索
题目链接 https://leetcode.com/problems/search-in-a-binary-search-tree/description/ 题目描述给定二叉搜索树(BST)的根节点 ...
Kubernetes配置Ceph RBD StorageClass
1. 在Ceph上为Kubernetes创建一个存储池 # ceph osd pool create k8s 2. 创建k8s用户 # ceph auth get-or-create client.k ...
单例模式【python】
在python中,如需让一个类只能创建一个实例对象,怎么能才能做到呢? 思路:1.通过同一个类创建的不同对象,都让他们指向同一个方向. 2.让个类只能创建唯一的实例对象. 方法:用到 _ _new ...
day10 消息队列，多进程和多线程以及协程，异步IO，事件驱动等
回顾一下线程和进程线程与进程的区别守护线程: 队列: 两种方式: 先进先出 # 后入先出 #卖水果,后来的来的是新的生产者消费者模型: 生产包子, 吃包子事件 event: 红绿灯模型 ...

canvas小图123

canvas小图123的更多相关文章

随机推荐

热门专题