1、时钟：
<!doctype html>
<html>
<head></head>
<body>
<canvas id="clock" width="500" height="500">
您的浏览器不支持canvas标签，无法看到时钟
</canvas>
<script>
var clock=document.getElementById('clock');
var cxt=clock.getContext('2d');
/*
1、获取画布
2、画图时首先需要设置画笔颜色，画笔画出的宽度。
3、开始路径。
4、画笔操作，比如画直线，矩形等。
5、关闭路径。
6、图像已经出来了，那么可以进行填充等。例如给圆填充颜色。
7、显示前面画出的结果。
*/
function drawClock(){
//清除画布
cxt.clearRect(0,0,500,500);
var now =new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
//小时必须获取浮点类型(小时+分数转化成的小时)
hour=hour+min/60;
//问题 19:23:30
//将24小时进制转换为12小时
hour=hour>12?hour-12:hour;
//表盘(蓝色)
cxt.lineWidth=10;
cxt.strokeStyle="blue";
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.closePath();
cxt.fillStyle="#abcdef";
cxt.fill();
cxt.stroke();
//刻度
//时刻度
for(var i=0;i<12;i++){
cxt.save();
//设置时针的粗细
cxt.lineWidth=7;
//设置时针的颜色
cxt.strokeStyle="#000";
//先设置0,0点
cxt.translate(250,250);
//再设置旋转角度
cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.font="12px 宋体";//css font属性
cxt.fillText(i+"",0,-170);
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
cxt.save();
//设置分刻度的粗细
cxt.lineWidth=5;
//设置颜色(使用时刻度的颜色)
cxt.strokeStyle="#000";
//设置或者重置画布的0，0点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i*6*Math.PI/180);
//画分针刻度
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
//设置时针风格
cxt.lineWidth=7;
//设置时针的颜色
cxt.strokeStyle="#000";
//设置异次元空间的0，0点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
//设置分针的风格
cxt.lineWidth=5;
cxt.strokeStyle="#000";
//设置异次元空间分针画布的圆心
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒针
cxt.save();
//设置秒针的风格
//颜色红色
cxt.strokeStyle="red";
//粗细 3像素
cxt.lineWidth=3;
//重置0，0点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(sec*6*Math.PI/180);
//画图
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
//画出时针、分针、秒针的交叉点、
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
//设置填充样式
cxt.fillStyle="gray";
cxt.fill();
//设置笔触样式(秒针已设置)
cxt.stroke();
//设置秒针前段的小圆点
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
cxt.closePath();
//设置填充样式
cxt.fillStyle="gray";
cxt.fill();
//设置笔触样式(秒针已设置)
cxt.stroke();
cxt.restore();
}
//使用setInterval(代码,毫秒时间) 让时钟动起来
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>
View Code
2、太阳系
<!doctype html>
<html>
<head></head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background:#000">
您的浏览器不支持canvas标签
</canvas>
<script>
//设置2d绘图环境
var cxt=document.getElementById('canvas').getContext('2d');
//轨道
function drawTrack(){
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.arc(500,500,(i+1)*50,0,360,false);
cxt.closePath();
//设置笔触的颜色
cxt.strokeStyle="#fff";
cxt.stroke();
}
}
drawTrack();
//星球
function Star(x,y,radius,cycle,sColor,eColor){
//画出星球需要哪些属性
//星球的坐标点
this.x=x;
this.y=y;
//星球的半径
this.radius=radius;
//公转周期
this.cycle=cycle;
//星球的颜色(开始色,结束色)
this.sColor=sColor;
this.eColor=eColor;
//新建一个渐变颜色空对象
this.color=null;
//设置一个计时器
this.time=0;
this.draw=function(){
//保存之前的画布内容
cxt.save();
//重置0,0坐标点
cxt.translate(500,500);
//设置旋转角度
cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
//画星球
cxt.beginPath();
cxt.arc(this.x,this.y,this.radius,0,360,false);
cxt.closePath();
//设置星球的填充颜色
//新建渐变对象
this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
//设置渐变效果
this.color.addColorStop(0,this.sColor);//渐变开始点和颜色
this.color.addColorStop(1,this.eColor);//渐变结束点和颜色
cxt.fillStyle=this.color;//将渐变对象复制给填充画笔
//填充星球
cxt.fill();
//恢复之前保存的画布内容
cxt.restore();
//执行完毕之后时间增加
this.time+=1;
}
}
//创建一个太阳对象的构造函数
function Sun(){
Star.call(this,0,0,20,0,"#F00","#f90");
}
//创建一个水星的对象构造方法
function Mercury(){
Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
}
//创建一个金星的对象构造方法
function Venus(){
Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");
}
//创建一个地球的对象构造方法
function Earth(){
Star.call(this,0,-150,10,365.224,"#78B1E8","#050C12");
}
//创建一个火星的对象构造方法
function Mars(){
Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");
}
//创建一个木星的对象构造方法
function Jupiter(){
Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");
}
//创建一个土星的对象构造方法
function Saturn(){
Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");
}
//创建一个天王星的对象构造方法
function Uranus(){
Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");
}
//创建一个天王星的对象构造方法
function Neptune(){
Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");
}
//创建太阳对象实例
var sun=new Sun();
//创建水星对象实例
var water=new Mercury();
//创建金星对象实例
var gold=new Venus();
//创建一个地球对象实例
var diqiu=new Earth();
//创建一个火星对象实例
var fire=new Mars();
//创建一个木星对象实例
var wood=new Jupiter();
//创建一个土星对象实例
var soil=new Saturn();
//创建一个天王星对象实例
var god=new Uranus();
//创建一个海王星对象实例
var sea=new Neptune();
function move(){
//清除画布
cxt.clearRect(0,0,1000,1000);
//画出轨道
drawTrack();
//画出每个星球
sun.draw();
water.draw();
gold.draw();
diqiu.draw();
fire.draw();
wood.draw();
soil.draw();
god.draw();
sea.draw();
}
//使个星球进行运动
setInterval(move,10);
</script>
</body>
</html>
View Code
3、简单的画图软件
css3样式：
/*页面公共属性设置*/
*{padding:0;margin:0;list-style:none;}
body{background:#ABCDEF}
/*页面顶部属性设置*/
#header{width:900px;height:80px;font-size:40px;margin:0 auto;text-align:center;line-height:80px}
/*页面中间部分(画图板)属性*/
#content{width:880px;height:550px;background:gray;margin:0 auto;padding:10px}
#tool{height:150px;text-align:center}
#tool li{float:left;width:175px;height:140px;background:#ccc;border-right:1px solid red}
#image{text-align:left;padding:20px}
#image li{height:30px;width:100px;list-style:square inside;border:0}
#image li button{background:gray;border:1px solid #000}
#image li button:hover{background:gray;border:1px solid #FFF}
#means,#shape{padding:20px}
#means li,#shape li{height:20px;width:40px;border:1px solid #000;margin-bottom:10px}
#means li:hover,#shape li:hover{height:20px;width:40px;border:1px solid #fff;margin-bottom:10px}
#means img,#shape img{height:20px;width:20px}
#size{padding:10px}
#size li{height:20px;width:120px;border:1px solid #ccc}
#size li:hover{height:20px;width:120px;border:1px solid #FFF}
#color{padding:25px}
#color li{width:20px;height:20px;border:1px solid #000;margin-bottom:10px;margin-right:3px}
#color li:hover{width:20px;height:20px;border:1px solid #fff;margin-bottom:10px;margin-right:3px}
#color #red{background:red}
#color #green{background:green}
#color #blue{background:blue}
#color #yellow{background:yellow}
#color #white{background:white}
#color #black{background:black}
#color #pink{background:pink}
#color #purple{background:purple}
#color #cyan{background:cyan}
#color #orange{background:orange}
#canvas{background:white}
#canvas:hover{cursor:crosshair
}
/*页面底部属性设置*/
#footer{width:900px;height:30px;margin:0 auto;text-align:center}
View Code
js文件：
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
//获取工具按钮的标签
//获取画笔标签
var Brush=document.getElementById('means_brush');
//获取橡皮标签
var Eraser=document.getElementById('means_eraser');
//获取油漆桶标签
var Paint=document.getElementById('means_paint');
//获取吸管标签
var Straw=document.getElementById('means_straw');
//获取文本标签
var Text=document.getElementById('means_text');
//获取放大镜标签
var Magnifier=document.getElementById('means_magnifier');
//获取形状按钮的标签
//获取画线标签
var Line=document.getElementById('shape_line');
//获取画圆圈的标签
var Arc=document.getElementById('shape_arc');
//获取画方框的标签
var Rect=document.getElementById('shape_rect');
//获取画多标签的标签
var Poly=document.getElementById('shape_poly');
//获取画圆形(填充)
var ArcFill=document.getElementById('shape_arcfill');
//获取画矩形的标签
var RectFill=document.getElementById('shape_rectfill');
//把12个工具和形状标签放到一个数组中
var actions=[Brush,Eraser,Paint,Straw,Text,Magnifier,Line,Arc,Rect,Poly,ArcFill,RectFill];
//获取线宽按钮
var Line_1=document.getElementById('width_1');
var Line_3=document.getElementById('width_3');
var Line_5=document.getElementById('width_5');
var Line_8=document.getElementById('width_8');
//把4中线宽对象放到一个数组中
var widths=[Line_1,Line_3,Line_5,Line_8];
//获取颜色按钮
var ColorRed=document.getElementById('red');
var ColorGreen=document.getElementById('green');
var ColorBlue=document.getElementById('blue');
var ColorYellow=document.getElementById('yellow');
var ColorWhite=document.getElementById('white');
var ColorBlack=document.getElementById('black');
var ColorPink=document.getElementById('pink');
var ColorPurPle=document.getElementById('purple');
var ColorCyan=document.getElementById('cyan');
var ColorOrange=document.getElementById('orange');
//把10中颜色标签对象放到一个数组中
var colors=[ColorRed,ColorGreen,ColorBlue,ColorYellow,ColorWhite,ColorBlack,ColorPink,ColorPurPle,ColorCyan,ColorOrange];
//设置初始值
//默认选中画笔工具
drawBrush(0);
//默认设置颜色
setColor(ColorRed,0);
//设置默认线宽
setLineWidth(0);
//状态设置函数
function setStatus(Arr,num,type){
for(var i=0;i<Arr.length;i++){
//设置选中的标签改变CSS属性
if(i==num){
//设置改变CSS的样式是背景色还是边框
if(type==1){
Arr[i].style.background="yellow";
}else{
Arr[i].style.border="1px solid #fff";
}
}else{//设置未选中的组中的其他标签改变颜色
if(type==1){
Arr[i].style.background="#ccc";
}else{
Arr[i].style.border="1px solid #000";
}
}
}
}
//设置图像功能函数 保存图片 清空画布
function saveimg(){
var imgdata=canvas.toDataURL();
var b64=imgdata.substring(22);
//alert(b64);
//将form表单中的隐藏表单 赋值(值就是我们获取的b64)
var data=document.getElementById('data');
data.value=b64;
//将表单提交到后台//http://localhost/down.php
var form=document.getElementById('myform');
form.submit();
}
//清空画布
function clearimg(){
//画布清除方法
cxt.clearRect(0,0,880,400);
}
//列出所有的按钮对应的函数
//铅笔工具函数
function drawBrush(num){
setStatus(actions,num,1);
var flag=0;//设置标志位->检测鼠标是否按下
canvas.οnmοusedοwn=function(evt){
evt=window.event||evt;
var startX=evt.pageX-this.offsetLeft;
var startY=evt.pageY-this.offsetTop;
cxt.beginPath();
cxt.moveTo(startX,startY);
flag=1;
}
//鼠标移动的时候->不同的绘图(获取鼠标的位置)
canvas.οnmοusemοve=function(evt){
evt=window.event||evt;
var endX=evt.pageX-this.offsetLeft;
var endY=evt.pageY-this.offsetTop;
//判断一下鼠标是否按下
if(flag){
//移动的时候设置路径并且画出来
cxt.lineTo(endX,endY);
cxt.stroke();
}
}
//鼠标抬起的时候结束绘图
canvas.οnmοuseup=function(){
flag=0;
}
//鼠标移出canvas的时候必须取消画图操作
canvas.οnmοuseοut=function(){
flag=0;
}
}
var eraserFlag=0;//设置橡皮擦的状态标志位
//橡皮工具函数
function drawEraser(num){
setStatus(actions,num,1);
canvas.onmousedown=function(evt){
evt=window.event||evt;
var eraserX=evt.pageX-this.offsetLeft;
var eraserY=evt.pageY-this.offsetTop;
//canvas擦出方法 cxt.clearRect();
cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);
eraserFlag=1;
}
//随着鼠标移动不停地擦出
canvas.οnmοusemοve=function(evt){
evt=window.event||evt;
var eraserX=evt.pageX-this.offsetLeft;
var eraserY=evt.pageY-this.offsetTop;
// 擦除方法
if(eraserFlag){//判断鼠标左键是否按下(按下的情况下拖动鼠标才能删除)
cxt.clearRect(eraserX-cxt.lineWidth,eraserY-cxt.lineWidth,cxt.lineWidth*2,cxt.lineWidth*2);
}
}
//抬起鼠标按键 清除擦出的状态位 变成0
canvas.οnmοuseup=function(){
eraserFlag=0;
}
//抬起鼠标移出画布 清除擦出的状态位 变成0
canvas.οnmοuseοut=function(){
eraserFlag=0;
}
}
//油漆桶工具函数
function drawPaint(num){
setStatus(actions,num,1);
canvas.onmousedown=function(){
//把画布涂成指定的颜色->画一个填充颜色的矩形
cxt.fillRect(0,0,880,400);
}
canvas.onmouseup=null;
canvas.onmousemove=null;
canvas.onmouseout=null;
}
//吸管工具函数
function drawStraw(num){
setStatus(actions,num,1);
canvas.onmousedown=function(evt){
evt=window.event||evt;
var strawX=evt.pageX-this.offsetLeft;
var strawY=evt.pageY-this.offsetTop;
//获取该点坐标处的颜色信息
//获取图像信息的方法getImageData(开始点X,开始点Y,宽度,高度)
var obj=cxt.getImageData(strawX,strawY,1,1);
//alert(obj.data[3]);//ImageData对象
//obj.data=[红,绿,蓝色,透明度]//1像素的数据
//注意:在data数组中，每4个数组元素表示canvas画布中的一个像素点，
//这4个元素的取值范围都是0-255
/*obj.data=[
红,绿,蓝色,透明度,
红,绿,蓝色,透明度,
红,绿,蓝色,透明度,
红,绿,蓝色,透明度,
红,绿,蓝色,透明度，
红,绿,蓝色,透明度,
红,绿,蓝色,透明度,
红,绿,蓝色,透明度,
]//多像素的数据
*/
//红色的RGB(255,0,0)
//绿色的RGB(0,255,0);
var color='rgb('+obj.data[0]+','+obj.data[1]+','+obj.data[2]+')';
//将吸管吸出的颜色设定到我们的应用中
cxt.strokeStyle=color;
cxt.fillStyle=color;
//颜色吸取吸取之后自动选中画笔工具
drawBrush(0);
}
//取消移动事件 、鼠标抬起事件、鼠标移出事件
canvas.οnmοusemοve=null;
canvas.onmouseup=null;
canvas.onmouseout=null;
}
//文本工具函数
function drawText(num){
setStatus(actions,num,1);
canvas.onmousedown=function(evt){
evt=window.event||evt;
//获取鼠标点击时的位置
var textX=evt.pageX-this.offsetLeft;
var textY=evt.pageY-this.offsetTop;
//alert(textX+'------'+textY);
//获取用户输入的信息
//window.prompt(对话框提示,默认值);
var userVal=window.prompt('请在这里输入文字','');
//alert(userVal);
//将用户输入的文字写到画布中对应的坐标点上。
if(userVal!=null){
cxt.fillText(userVal,textX,textY);
}
}
canvas.onmousemove=null;
canvas.onmouseup=null;
canvas.onmouseout=null;
}
//放大镜工具函数
function drawMagnifier(num){
setStatus(actions,num,1);
//用户输入的数据大小
var scale=window.prompt('请输入要放大的百分比[只能是整型]','100');
//吧数据转成对应canvas画布的大小
var scaleW=880*scale/100;
var scaleH=400*scale/100;
//将数据设置到对应HTML标签上
canvas.style.width=parseInt(scaleW)+'px';
canvas.style.height=parseInt(scaleH)+'px';
}
//线形状函数
function drawLine(num){
setStatus(actions,num,1);
canvas.onmousedown=function(evt){
evt=window.event||evt;
//获取起始点的坐标(相对于canvas画布的)
//先获取鼠标距离页面顶端的距离和左端的距离
//evt.pageY evt.pageX
//获取当前画布相对页面顶端和左端的距离
//this.offectTop this.offsetLeft
//计算当前鼠标相对于canvas画布的距离(以canvas的左上角为0，0)
var startX=evt.pageX-this.offsetLeft;
var startY=evt.pageY-this.offsetTop;
//设置直线的开始点
cxt.beginPath();//尽量写上开始新路径
cxt.moveTo(startX,startY);
}
canvas.onmousemove=null;//注销掉其他工具注册时间
canvas.οnmοuseοut=null;//
//鼠标按键抬起的时候
canvas.οnmοuseup=function(evt){
//计算鼠标抬起时鼠标相对于画布的坐标
var endX=evt.pageX-this.offsetLeft;
var endY=evt.pageY-this.offsetTop;
//设置路径吧开始点和结束点连接起来,然后进行绘图
cxt.lineTo(endX,endY);
cxt.closePath();
cxt.stroke();
}
}
//将变量设置为全局变量(如果是局部变量在其他的函数中无法调用)
var arcX=0;
var arcY=0;
//圆形形状函数
function drawArc(num){
setStatus(actions,num,1);
canvas.onmousedown=function(evt){
evt=window.event||evt;
//获取圆心的位置
arcX=evt.pageX-this.offsetLeft;
arcY=evt.pageY-this.offsetTop;
}
canvas.onmouseup=function(evt){
evt=window.event||evt;
//获取半径(目的)
//实际获取的是一个坐标
var endX=evt.pageX-this.offsetLeft;
var endY=evt.pageY-this.offsetTop;
//计算C的距离
var a=endX-arcX;
var b=endY-arcY;
//计算半径
var c=Math.sqrt(a*a+b*b);
cxt.beginPath();
cxt.arc(arcX,arcY,c,0,360,false);
cxt.closePath();
cxt.stroke();
}
canvas.onmousemove=null;//注销掉鼠标移动时间
canvas.οnmοuseοut=null;
}
//设置矩形全局变量
var rectX=0;
var rectY=0;
//矩形形状函数
function drawRect(num){
setStatus(actions,num,1);
canvas.onmousedown=function(evt){
evt=window.event||evt;
//获取矩形左上角(对角线的开始点)
rectX=evt.pageX-this.offsetLeft;
rectY=evt.pageY-this.offsetTop;
}
canvas.onmouseup=function(evt){
evt=window.event||evt;
//先获取鼠标的当前坐标
var endX=evt.pageX-this.offsetLeft;
var endY=evt.pageY-this.offsetTop;
//计算矩形的宽高
var rectW=endX-rectX;
var rectH=endY-rectY;
//画出矩形
cxt.strokeRect(rectX,rectY,rectW,rectH);
}
canvas.onmousemove=null;
canvas.onmouseout=null;
}
var polyX=0;
var polyY=0;
//多边形形状函数
function drawPoly(num){
setStatus(actions,num,1);
canvas.onmousedown=function(evt){
evt=window.event||evt;
polyX=evt.pageX-this.offsetLeft;
POLyY=evt.pageY-this.offsetTop;
}
canvas.onmouseup=function(evt){
evt=window.event||evt;
var endX=evt.pageX-this.offsetLeft;
var endY=evt.pageY-this.offsetTop;
cxt.beginPath();
//将画笔移动到右下角的顶点
cxt.moveTo(endX,endY);
//计算左下角的顶点坐标
var lbX=2*polyX-endX;
var lbY=endY;
cxt.lineTo(lbX,lbY);
//设置第三个顶点的坐标
var tmpC=2*(endX-polyX);
var tmpA=endX-polyX;
var tmpB=Math.sqrt(tmpC*tmpC-tmpA*tmpA);
//计算最上面顶点坐标
//endY-tmpB 定点的Y坐标 polyX是顶点的X坐标
//画到顶点
cxt.lineTo(polyX,endY-tmpB);
//封闭路径->画出来
cxt.closePath();
cxt.stroke();
}
canvas.onmousemove=null;
canvas.onmouseout=null;
}
//圆形填充形状函数
function drawArcFill(num){
setStatus(actions,num,1);
canvas.onmousedown=function(evt){
evt=window.event||evt;
//获取圆心的位置
arcX=evt.pageX-this.offsetLeft;
arcY=evt.pageY-this.offsetTop;
}
canvas.onmouseup=function(evt){
evt=window.event||evt;
//获取半径(目的)
//实际获取的是一个坐标
var endX=evt.pageX-this.offsetLeft;
var endY=evt.pageY-this.offsetTop;
//计算C的距离
var a=endX-arcX;
var b=endY-arcY;
//计算半径
var c=Math.sqrt(a*a+b*b);
cxt.beginPath();
cxt.arc(arcX,arcY,c,0,360,false);
cxt.closePath();
cxt.fill();
}
canvas.onmousemove=null;//注销掉鼠标移动时间
canvas.οnmοuseοut=null;
}
//矩形填充形状函数
function drawRectFill(num){
setStatus(actions,num,1);
setStatus(actions,num,1);
canvas.onmousedown=function(evt){
evt=window.event||evt;
//获取矩形左上角(对角线的开始点)
rectX=evt.pageX-this.offsetLeft;
rectY=evt.pageY-this.offsetTop;
}
canvas.onmouseup=function(evt){
evt=window.event||evt;
//先获取鼠标的当前坐标
var endX=evt.pageX-this.offsetLeft;
var endY=evt.pageY-this.offsetTop;
//计算矩形的宽高
var rectW=endX-rectX;
var rectH=endY-rectY;
//画出矩形
cxt.fillRect(rectX,rectY,rectW,rectH);
}
canvas.onmousemove=null;
canvas.onmouseout=null;
}
//线宽设置函数
function setLineWidth(num){
setStatus(widths,num,1);
switch(num){
case 0:
cxt.lineWidth=1;
break;
case 1:
cxt.lineWidth=3;
break;
case 2:
cxt.lineWidth=5;
break;//第14讲补充的break 原因:遗漏
case 3:
cxt.lineWidth=8;
break;
default:
cxt.lineWidth=1;
}
}
//颜色设置函数
function setColor(obj,num){
setStatus(colors,num,0);
//设置画笔颜色和填充颜色
cxt.strokeStyle=obj.id;
cxt.fillStyle=obj.id;
}
View Code
html文件：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5在线画图板</title>
<link href="canvas.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header id="header">HTML5在线画板</header>
<section id="content">
<!--工具区域-->
<ul id="tool">
<li>
<h3>图像</h3>
<hr />
<ul id="image">
<li id="saveimg">
<form id="myform" action="http://localhost/down.php" method="post">
<input type="hidden" id="data" name="data" value="" />
<button onclick="saveimg()" type="button">保存图片</button>
</form>
</li>
<li id="clearimg"><button onclick="clearimg()">清空画板</button></li>
</ul>
</li>
<li>
<h3>工具</h3>
<hr />
<ul id="means">
<li id="means_brush" onclick="drawBrush(0)">
<img src="images/Brush.png" />
</li>
<li id="means_eraser" onclick="drawEraser(1)">
<img src="images/Eraser.png" />
</li>
<li id="means_paint" onclick="drawPaint(2)">
<img src="images/Paint.png" />
</li>
<li id="means_straw" onclick="drawStraw(3)">
<img src="images/Straw.png" />
</li>
<li id="means_text" onclick="drawText(4)">
<img src="images/text.png" />
</li>
<li id="means_magnifier" onclick="drawMagnifier(5)"><img src="images/Magnifier.png" /></li>
</ul>
</li>
<li>
<h3>形状</h3>
<hr />
<ul id="shape">
<li id="shape_line" onclick="drawLine(6)">
<img src="images/line.png" />
</li>
<li id="shape_arc" onclick="drawArc(7)">
<img src="images/arc.png" />
</li>
<li id="shape_rect" onclick="drawRect(8)">
<img src="images/rect.png" />
</li>
<li id="shape_poly" onclick="drawPoly(9)">
<img src="images/poly.png" />
</li>
<li id="shape_arcfill" onclick="drawArcFill(10)">
<img src="images/arcfill.png" />
</li>
<li id="shape_rectfill" onclick="drawRectFill(11)">
<img src="images/rectfill.png" />
</li>
</ul>
</li>
<li>
<h3>线宽</h3>
<hr />
<ul id="size">
<li id="width_1" onclick="setLineWidth(0)">
<img src="images/line1px.png" />
</li>
<li id="width_3" onclick="setLineWidth(1)">
<img src="images/line3px.png" />
</li>
<li id="width_5" onclick="setLineWidth(2)">
<img src="images/line5px.png" />
</li>
<li id="width_8" onclick="setLineWidth(3)">
<img src="images/line8px.png" />
</li>
</ul>
</li>
<li>
<h3>颜色</h3>
<hr />
<ul id="color">
<li id="red" onclick="setColor(this,0)"></li>
<li id="green" onclick="setColor(this,1)"></li>
<li id="blue" onclick="setColor(this,2)"></li>
<li id="yellow" onclick="setColor(this,3)"></li>
<li id="white" onclick="setColor(this,4)"></li>
<li id="black" onclick="setColor(this,5)"></li>
<li id="pink" onclick="setColor(this,6)"></li>
<li id="purple" onclick="setColor(this,7)"></li>
<li id="cyan" onclick="setColor(this,8)"></li>
<li id="orange" onclick="setColor(this,9)"></li>
</ul>
</li>
</ul>
<!--绘图区域-->
<canvas id="canvas" width="880" height="400">
您的浏览器不支持canvas标签，请升级浏览器
</canvas>
<!--请在canvas标签之后连入JS文件--->
<script src="canvas.js"></script>
</section>
<footer id="footer">
<small>版权所有，盗版不究 @ LAMP兄弟连丛浩</small>
</footer>
</body>
</html>
View Code
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
