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的更多相关文章

  1. [原]Wpf应用Path路径绘制圆弧

    1. 移动指令:Move Command(M):M 起始点  或者:m 起始点比如:M 100,240或m 100,240使用大写M时,表示绝对值; 使用小写m时; 表示相对于前一点的值,如果前一点没 ...

  2. modernizr.js

    1.判断浏览器是否支持 h5 if(Modernizr.canvas){ alert(123); }else{ alert(321); } 2.判断浏览器是否支持 canvas function su ...

  3. WPF图片浏览器(显示大图、小图等)

    原文:WPF图片浏览器(显示大图.小图等) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wangshubo1989/article/details ...

  4. 伙伴们休息啦canvas绘图夜空小屋

    HTML5 canvas绘图夜空小屋 伙伴们园友们,夜深了,休息啦,好人好梦... 查看效果:http://hovertree.com/texiao/html5/28/ 效果图如下: 代码如下: &l ...

  5. canvas简介

    一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...

  6. 用HTML5 CANVAS做自定义路径的动态效果图片!

    最近对HTML5开始感兴趣了,实现的效果如下图,大家可以从代码里换掉图片 我用的是canvas里面的2d绘图,其中上图的路径是网上在线绘制的,我太懒了,哈哈 下面是网址: http://www.vic ...

  7. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  8. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  9. canvas转盘抽奖

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...

随机推荐

  1. MySQL派生表(derived)优化一例

    1.什么是派生表derived 关键字:子查询–>在From后where前的子查询 mysql; +----+-------------+------------+------+-------- ...

  2. oc字典

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...

  3. JS - OOP-继承的最佳实现方式

    如上图,使用第三种方式实现继承最好,也就是加了下划线的. 但是Object.create方法是ES6才支持的,所以,右边就写了一个实现其同样功能的函数.

  4. Python 正则表达式 匹配次数

    管道可以匹配多个正则表达式中的一个 >>> >>> m=re.search(r'Batman|Tina Fey','Batman and Tina Fey')> ...

  5. jupyter notebook(二)——修改jupyter打开默认的工作目录

    1.简述 jupyter notebook,启动后,浏览器发现工作目录并不是自己真正的代码的工作路径.所以需要设置一下.这样方便自己快捷使用. 2.设置修改jupyter notebook打开后默认工 ...

  6. java的重写(Override) (2013-10-11-163 写的日志迁移

    /* *说明方法的重写(又称方法的覆盖)子类并不想原封不动地继承父类的方法,而是想作一定的修改 */ package czbk.jxy.study; /** * @author Archon * @d ...

  7. Leetcode 700. 二叉搜索树中的搜索

    题目链接 https://leetcode.com/problems/search-in-a-binary-search-tree/description/ 题目描述 给定二叉搜索树(BST)的根节点 ...

  8. Kubernetes配置Ceph RBD StorageClass

    1. 在Ceph上为Kubernetes创建一个存储池 # ceph osd pool create k8s 2. 创建k8s用户 # ceph auth get-or-create client.k ...

  9. 单例模式【python】

    在python中,如需让一个类只能创建一个实例对象,怎么能才能做到呢? 思路:1.通过同一个类创建的不同对象,都让他们指向同一个方向.   2.让个类只能创建唯一的实例对象. 方法:用到 _ _new ...

  10. day10 消息队列,多进程和多线程以及协程,异步IO,事件驱动等

    回顾一下线程和进程 线程与进程的区别 守护线程: 队列: 两种方式: 先进先出  # 后入先出   #卖水果,后来的来的是新的 生产者消费者模型: 生产包子, 吃包子 事件 event: 红绿灯模型 ...