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" ...
随机推荐
- 函数定义和调用 -------JavaScript
本文摘要:http://www.liaoxuefeng.com/ 定义函数 在JavaScript中,定义函数的方式如下: function abs(x) { if (x >= 0) { ret ...
- curl_easy_setopt函数介绍
本节主要介绍curl_easy_setopt中跟http相关的参数.注意本节的阐述都是以libcurl作为主体,其它为客体来阐述的. 1. CURLOPT_URL 设置访问URL 2. ...
- C/C++程序基础 （四）字符串
字符串与数字转化 数字转换字符串:itoa, ltoa, ultoa ; gcvt, ecvt, fcvt 字符串转数字:atoi, atof(双精度浮点), atol:strtod(双精度浮点), ...
- 爬虫学习（四）——post请求爬取
百度翻译爬取数据 import urllib.requestimport urllib.parsepost_url = "https://fanyi.baidu.com/sug"h ...
- h5获取摄像头拍照功能
完整代码展示 <!DOCTYPE html> <head> <title>HTML5 GetUserMedia Demo</title> <met ...
- Python 列表元素分组,比如 [1,2,3,...20]变成 [[1,2,3],[4,5,6]....]（列表生成式解决）
# 生成一个1到20的列表 a=[x for x in range(1,21)] # 把a列表切片,并赋值给b列表,x为0到20且步长为3的列表,在这里具体为[0,3,6,9,12,15,18] # ...
- hadoop 启动or运行mr错误
hadoop 错误:Incorrect configuration: namenode address dfs.namenode.servicerpc-address or dfs.namenode. ...
- Codeforces 653G Move by Prime 组合数学
题意: 有一个长度为\(n\)的正整数序列\(a\),有这样一种操作: 每次可以选序列中的某一个数乘上或除以某一个素数. 求对于每一个子序列使其所有元素相等的最少操作次数之和. 分析: 因为两个素数之 ...
- 【Keepalived+MySQL】MySQL双主互备+高可用
一.基本信息说明 [DB1] IP: 192.168.102.144 hostname: LVS-Real1 [DB2] IP: 192.168.102.145 hostname: LVS-Real2 ...
- SparkStreaming和Kafka的整合
当我们正确地部署好Spark Streaming,我们就可以使用Spark Streaming提供的零数据丢失机制.需要满足以下几个先决条件: 1.输入的数据来自可靠的数据源和可靠的接收器: 2.应用 ...