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" ...
随机推荐
- How to save console output to a file in Eclipse
https://coderanch.com/t/278299/java/Writing-output-console-file-system File file = new File("te ...
- VueX源码分析（5）
VueX源码分析(5) 最终也是最重要的store.js,该文件主要涉及的内容如下: Store类 genericSubscribe函数 resetStore函数 resetStoreVM函数 ins ...
- 自动化运维工具——ansible模板与roles（四）
一. 模板Templates 文本文件,嵌套有脚本(使用模板编程语言编写) Jinja2语言,使用字面量,有下面形式 字符串:使用单引号或双引号 数字:整数,浮点数 列表:[item1, item2, ...
- 三 python并发编程之多线程-理论
一 什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...
- java util - json转换工具 gson
需要 gson-2.7.jar 包 package cn.java.gson; import com.google.gson.JsonElement; import com.google.gson.J ...
- [转载]Failed to read session data On PHP 7.1
从php5.6升级php7.1,报错 Warning: session_start(): Failed to read session data: user (path: ) Warning: ses ...
- java中的继承 (2013-10-11-163 写的日志迁移
继承:为了解决代码重用 定义: 子类通过继承父类,可以调用父类中非私有的属性和方法,达到重用的目的,通过关键字extends实现: ################以下为代码演示: class A ...
- JZOJ 4725. 质数序列
Description 由于去NOI的火车“堵”了数不清时间,小Z和小D打完ETG,闲着无聊开始看今年的JSOI省选题,并尝试着修改题目:对于一个长度为L ≥ 2的序列,X:x1,x2,...,xL ...
- printf("\033[1;33m ***** \033[0m \n");
printf("\033[1;33m Hello World. \033[0m \n"); 颜色如下: none = "\033[0m" black = &qu ...
- 统计C语言关键字出现次数
统计C语言关键字出现次数 <C程序设计语言>K&R版本第6章结构6.3结构数组内容 /* Name: 统计c语言关键字出现次数 Copyright: Author: lingr7 ...