乐由心起

HTML5 小实例

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){
        //设置选中的标签改变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>
            
            <script src="canvas.js">script>
        section>
        <footer id="footer">
            <small>版权所有，盗版不究 @ LAMP兄弟连丛浩small>
        footer>
    body>
html>

View Code

你可能感兴趣的:(Html)

swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
斟一小组鸡血视频和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
ubuntu安装opencv最快的方法 Derek重名了
最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
处理标签包裹的字符串，并取出前250字符周bro 前端 javascript 开发语言
//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
非关系型数据库天秤-white nosql
一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%
Python精选200Tips：121-125 AnFany Python200+Tips python 开发语言
Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
七.正则化愿风去了
吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
利用frp实现内网穿透（需要云主机） heiyumiao 网络工具 github windows linux
详细实现教程：https://www.iplaysoft.com/frp.htmlhttps://blog.csdn.net/u013144287/article/details/78589643/项目官网地址：https://github.com/fatedier/frp/releases按照系统下载相应的程序包什么是frp内网穿透工具有很多，其中Frp(FastReverseProxy)是比较
word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf 想吃草莓干 word转html制作操作手册
Word文档转换为HTML帮助文档操作手册一、使用到的软件DOC2CHMDreamweaverCS3Helpandmanual4二、操作步骤1.先建立一个工作目录。如hhwork。2.将需要转换的文件复制到此工作目录下。如果是中文文件名，最好将其改为英文文件名。例：现在要将《小神探点检定修信息管理系统使用手册0.3.6.doc》转换为Html格式的帮助文档，首先将此文档复制到hhwork目录下并将
WORD批量转换器MultiDoc Converter uolian 工作 word
WORD批量转换器MultiDocConverterhttps://www.52pojie.cn/thread-1318745-1-1.html可批量将doc、docx等文件格式转成doc、docx、pdf、rtf、txt、html、epub等格式。安装包下载地址：https://wws.lanzouj.com/irvVbiz0pkd最终下载文件打包地址（未作成单文件，不确定是否可以直接使用）：h
HTML中"bgcolor"与"background-color"的区别 Sardar_ html
bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
【Python爬虫】百度百科词条内容 PokiFighting 数据处理 python 爬虫开发语言
词条内容我这里随便选取了一个链接，用的是FBI的词条importurllib.requestimporturllib.parsefromlxmlimportetreedefquery(url):headers={'user-agent':'Mozilla/5.0(WindowsNT6.1;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/80.
说说在 Vue.js 中如何实现组件间通信 deniro
1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功
对于规范和实现，你会混淆吗？ yangshangchuan HotSpot
昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So
android 网络百合不是茶网络
android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来方便查找 , 服务器使用的是TomCat 服务器代码; servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr
[读书笔记]读法拉第传 comsci 读书笔记
1831年的时候,一年可以赚到1000英镑的人..应该很少的... 要成为一个科学家,没有足够的资金支持,很多实验都无法完成但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......
随机数的产生沐刃青蛟随机数
c++中阐述随机数的方法有两种：一是产生假随机数（不管操作多少次，所产生的数都不会改变）这类随机数是使用了默认的种子值产生的，所以每次都是一样的。 //默认种子 for (int i = 0; i < 5; i++) { cout<<
PHP检测函数所在的文件名 IT独行者 PHP 函数
很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。创建引用脚本。代码： [php] view plain copy // Filename: functions.php <?php&nbs
银行各系统功能简介文强chu 金融
银行各系统功能简介　业务系统核心业务系统业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等清分清算系统以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程国际结算系
Python学习1(pip django 安装以及第一个project) 小桔子 python django pip
最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p
php 数组 aichenglong PHP 排序数组循环多维数组
1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,
安装python2.7 AILIKES python
安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp /opt/soft/Python-2
java异常的处理探讨百合不是茶 JAVA异常
//java异常 /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常 b,抛出异常 c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常 */ //2，学会使用try-catch-finally来处理异常
getElementsByName实例 bijian1013 element
实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
探索JUnit4扩展：Runner bijian1013 java 单元测试 JUnit
参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。文章地址：http://www.blogjava.net/jiangshachina/archive/20
[MongoDB学习笔记二]MongoDB副本集 bit1129 mongodb
1. 副本集的特性 1)一台主服务器(Primary),多台从服务器(Secondary) 2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作 3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来 2
【Spark八十一】Hive in the spark assembly bit1129 assembly
Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)
Nginx问题定位之监控进程异常退出 ronin47
nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s
No grammar constraints (DTD or XML schema).....两种解决方法 byalias xml
方法一：常用方法关闭XML验证工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。方法二：（个人推荐）添加内容如下 <?xml version=
Netty源码学习-DefaultChannelPipeline bylijinnan netty
package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline {
MYSQL数据库常用备份及恢复语句 chicony mysql
备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码数据库名 > 文件备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba
小白谈谈云计算--基于Google三大论文 CrazyMizzz Google 云计算 GFS
之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。我先说说GFS &n
hadoop 平衡空间设置方法 daizj hadoop balancer
在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property> <name>dfs.balance.bandwidthPerSec</name> <value>10485760</value> <description&g
Eclipse程序员要掌握的常用快捷键 dcj3sjt126com 编程
判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。曾有人在豆瓣评《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个程序员图书列表，目的也就是通过读书，让程序员变懒。程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得
Android学习之路 dcj3sjt126com Android学习
转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。下面说说我学习Android的感受，我学Android首先是看MARS的视
java 遍历Map的四种方法 eksliang java HashMap java 遍历Map的四种方法
转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式
【精典】数据库相关相关 gengzg 数据库
package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{
自动补全 huyana_town 自动补全
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
jquery在线预览PDF文件，打开PDF文件天梯梦 jquery
最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
ViewPager刷新单个页面的方法 lovelease android viewpager tag 刷新
使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面
利用按位取反（~）从复合枚举值里清除枚举值草料场 enum
以 C# 中的 System.Drawing.FontStyle 为例。如果需要同时有多种效果，如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline; 如果需要去除 style 里的某一种效果，
Linux系统新手学习的11点建议刘星宇编程工作 linux 脚本
　　随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。　　一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu
hibernate dao层应用之HibernateDaoSupport二次封装 wangzhezichuan DAO Hibernate
/** * 方法描述:sql语句查询返回List<Class> * 方法备注: Class 只能是自定义类 * @param calzz * @param sql * @return * 创建人：王川 * 创建时间：Jul