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>

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>

3、简单的画图软件
　 css3样式：

/*页面公共属性设置*/

*{padding:;margin:;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:}

#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}

　 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.onmousedown=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.onmousemove=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.onmouseup=function(){

                flag=0;

        }

        //鼠标移出canvas的时候必须取消画图操作

        canvas.onmouseout=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.onmousemove=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.onmouseup=function(){

        eraserFlag=0;

    }

    //抬起鼠标移出画布     清除擦出的状态位 变成0

    canvas.onmouseout=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.onmousemove=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.onmouseout=null;//

    //鼠标按键抬起的时候

    canvas.onmouseup=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.onmouseout=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.onmouseout=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;

}

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="data:images/Brush.png" />

                        </li>

                        <li id="means_eraser" onclick="drawEraser(1)">

                            <img src="data:images/Eraser.png" />

                        </li>

                        <li id="means_paint" onclick="drawPaint(2)">

                            <img src="data:images/Paint.png" />

                        </li>

                        <li id="means_straw" onclick="drawStraw(3)">

                            <img src="data:images/Straw.png" />

                        </li>

                        <li id="means_text" onclick="drawText(4)">

                            <img src="data:images/text.png" />

                        </li>

                        <li id="means_magnifier" onclick="drawMagnifier(5)"><img src="data:images/Magnifier.png" /></li>

                    </ul>

                </li>

                <li>

                    <h3>形状</h3>

                    <hr />

                    <ul id="shape">

                        <li id="shape_line" onclick="drawLine(6)">

                            <img src="data:images/line.png" />

                        </li>

                        <li id="shape_arc" onclick="drawArc(7)">

                            <img src="data:images/arc.png" />

                        </li>

                        <li id="shape_rect" onclick="drawRect(8)">

                            <img src="data:images/rect.png" />

                        </li>

                        <li id="shape_poly" onclick="drawPoly(9)">

                            <img src="data:images/poly.png" />

                        </li>

                        <li id="shape_arcfill" onclick="drawArcFill(10)">

                            <img src="data:images/arcfill.png" />

                        </li>

                        <li id="shape_rectfill" onclick="drawRectFill(11)">

                            <img src="data:images/rectfill.png" />

                        </li>

                    </ul>

                </li>

                <li>

                    <h3>线宽</h3>

                    <hr />

                    <ul id="size">

                        <li id="width_1" onclick="setLineWidth(0)">

                            <img src="data:images/line1px.png" />

                        </li>

                        <li id="width_3" onclick="setLineWidth(1)">

                            <img src="data:images/line3px.png" />

                        </li>

                        <li id="width_5" onclick="setLineWidth(2)">

                            <img src="data:images/line5px.png" />

                        </li>

                        <li id="width_8" onclick="setLineWidth(3)">

                            <img src="data: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>

HTML5 小实例的更多相关文章

  1. HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 【HTML5】实例练习

    1.许多时髦的网站都提供视频.如果在网页上展示视频? <!DOCTYPE HTML> <html> <body> <video width="320 ...

  3. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  4. winform 异步读取数据 小实例

    这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后 再把数据导入 ...

  5. CSS应用内容补充及小实例

    一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. Objective-C之代理设计模式小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  7. Objective-C之@类别小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  8. OC小实例关于init方法不小心的错误

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  9. canva实践小实例 —— 马赛克效果

    前面给大家带来了操作像素的API,此时此刻,我觉得应该配以小实例来进行进一步的说明和演示,以便给大家带来更宽广的视野和灵感,你们看了我的那么多的文章,应该是懂我的风格,废话不多说,进入正题: 这次给大 ...

随机推荐

  1. 面试题-Java设计模式举例

    面试题-Java设计模式举例 1.适配器模式 涉及三个角色:Target目标接口.Adaptee源角色.Adapter适配器:Adapter将源接口适配到目标接口,继承源接口,实现目标接口. Java ...

  2. NSTimer_Block封装定时器的target－action成Block回调

    前言 定时器NSTimer虽然简单易用,但是目标响应机制(target-action)这种方式很容易在代码中出现代码臃肿的情况,特别是在一个文件中有大量的代码,多个定时器的时候不方便调试,因此将NST ...

  3. javascript模块化是什么及其优缺点介绍

    模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口.模块间具有透明性 如今backbone.emberjs.spinejs.batmanjs 等MVC框架侵袭而 ...

  4. iis win7 注册

    http://blog.sina.com.cn/s/blog_7ed5a8080100rinj.html vs2010默认的是4.0框架,4.0的框架是独立的CLR,和2.0的不同,如果想运行4.0的 ...

  5. C#-01.语法基础

    a. 语法基础 i. 命名空间(namespace):是 C# 中组织代码的方式,用来声明命名空间 . 语法:namespace 命名空间名称{ //命名空间的声明 } . 作用:可以把紧密相关的一些 ...

  6. Javaweb三大组件之一 servlet

    1.servlet基本使用 注意:单例:init只会执行一次    线程不安全 1.1 创建方式 (1)实现servlet接口[不使用] package cn.getword.servlet; imp ...

  7. select支持多查询，获取分页count

    在我们使用mybatis 时,当我们根据分页去查询数据集时,需要传入的参数有page(页码)和size(每页的条数),而我们期望获取到的数据有,小于或等于size的list数据集,同时我们还需要得到一 ...

  8. 【学习笔记】开源日志记录工具log4j使用方法

    http://blog.csdn.net/zouqingfang/article/details/37558469 一.在MyEclipse中使用log4j的步骤比较简单,主要分为以下四个步骤: 1. ...

  9. JS中绑定事件顺序（事件冒泡与事件捕获区别）

    在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype ...

  10. OLEDB 静态绑定和数据转化接口

    OLEDB 提供了静态绑定和动态绑定两种方式,相比动态绑定来说,静态绑定在使用上更加简单,而在灵活性上不如动态绑定,动态绑定在前面已经介绍过了,本文主要介绍OLEDB中的静态,以及常用的数据类型转化接 ...