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" ...
随机推荐
- 事件流，事件对象和jQuery
事件流 多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被触发后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为“事件流” 例子:html代码: <div cl ...
- java算法面试题：递归算法题2 第1个人10，第2个比第1个人大2岁，依次递推，请用递归方式计算出第8个人多大？
package com.swift; public class Digui_Return { public static void main(String[] args) { /* * 递归算法题2 ...
- 问题009：java当中的关键字有哪些？在Editplus文本编辑软件中是什么颜色的？java当中的标识符有什么要求？Java中注释分为几类？
(1) public 公共的,表示访问的权限 (2) private 私有的,表示一种访问权限 (3) class 类关键字,表示定义一个类 java中的关键字都是大写的还是小写的?小写的,在Edit ...
- runtime运行时，类、对象、isa指针
先查看一段OC源码,关于类的定义: /// An opaque type that represents an Objective-C class. typedef struct objc_class ...
- mysql 基础,列类型
- L2TP用户添加和删除、搜索脚本
#!/bin/bash #author Template . /etc/init.d/functions DATE_TIME=$(date +%F-%T) FILE_PATH='/etc/ppp/ch ...
- SQLite3 of python
SQLite3 of python 一.SQLite3 数据库 SQLite3 可使用 sqlite3 模块与 Python 进行集成,一般 python 2.5 以上版本默认自带了sqlite3模块 ...
- C语言实例解析精粹学习笔记——44（冒泡排序）
冒泡排序,从序列的最后一个元素与前一个元素比较大小,如果R[n-1]>R[n]则交换两个元素的位置(R[0]作为临时存放区)将最小的数据交换到R[1],第二次循环将第二小的数交换到R[2].通过 ...
- Sliding Window POJ - 2823
Description An array of size n ≤ 106 is given to you. There is a sliding window of size k which is m ...
- TI C64X+通用库函数使用手册
在使用前,当知悉以下几点: 函数进程由手动汇编而成,已充分发挥器件效率.同时TI对外提供C和线性汇编代码 对于个人一些特殊应用,DSPLIB可能会带来额外的cycle消耗 TI DSPLIB依平台和时 ...