微信

Canvas -画图 

2014-09-30  09:14:57  
<!doctype html>
<html>

<head>
    <title>
    </title>
</head>

<style>


</style>
<body>
    <canvas width=="500" height="500" id="demo">
        您的浏览器不支持canvas！
    </canvas>
    
    <script>
        var canvas = document.getElementById('demo');
    //    alert(canvas);
    
     var ctx = canvas.getContext('2d');
     
     //alert(ctx)
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(200,10);
    ctx.closePath();
    ctx.stroke();
//end
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(100,70);
    ctx.closePath();
    ctx.stroke();
//end
    ctx.beginPath();
    ctx.moveTo(200,10);
    ctx.lineTo(290,60);
    ctx.closePath();
    ctx.stroke();
//end
    
    ctx.beginPath();
    ctx.moveTo(100,70);
    ctx.lineTo(290,60);
    ctx.closePath();
    ctx.stroke();
//end
        
    ctx.beginPath(); 
    ctx.arc(150, 100, 50, 0, Math.PI*2, true); 
    ctx.lineWidth = 1.0; 
    ctx.strokeStyle = "#000"; 
        ctx.closePath();
    ctx.stroke();

        //左空心眼睛
    ctx.beginPath(); 
    ctx.arc(120, 100, 10, 0, Math.PI*2, true); 
    ctx.lineWidth = 1.0; 
    ctx.strokeStyle = "#000"; 
        ctx.closePath();
    ctx.stroke();
        //右空心眼睛
    ctx.beginPath(); 
    ctx.arc(150, 100, 10, 0, Math.PI*2, true); 
    ctx.lineWidth = 1.0; 
    ctx.strokeStyle = "#000"; 
    ctx.closePath();
    ctx.stroke();
        
    //右实心眼睛
    ctx.beginPath(); 
    ctx.arc(150, 100, 3, 0, Math.PI*2, true); 
    ctx.lineWidth = 1.0; 
    ctx.fillStyle = "#000000"; 
    ctx.fill();
    ctx.shadowOffsetX = 0; // 设置水平位移
    ctx.shadowOffsetY = 0; // 设置垂直位移
    ctx.shadowBlur = 10; // 设置模糊度
    ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色
    ctx.closePath();
    ctx.stroke();
        
    //左实心眼睛
    ctx.beginPath(); 
    ctx.arc(120, 100, 3, 0, Math.PI*2, true); 
    ctx.lineWidth = 1.0; 
    ctx.strokeStyle = "#000"; 
    ctx.fill();
    ctx.shadowOffsetX = 0; // 设置水平位移
    ctx.shadowOffsetY = 0; // 设置垂直位移
    ctx.shadowBlur = 10; // 设置模糊度
    ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色
    ctx.closePath();
    ctx.stroke();
    
    //嘴

    ctx.beginPath(); 
    ctx.arc(135    , 130, 10, 10, false); 
    ctx.strokeStyle = "#000"; 
        ctx.closePath();
    ctx.stroke();
    
    
    //线 帽子线
    
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.closePath();
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(100,70);
    ctx.lineTo(100,150);
    ctx.closePath();
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(200,10);
    ctx.lineTo(200,100);
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(290,60);
    ctx.lineTo(290,130);
    ctx.closePath();
    ctx.stroke();
    




//弧线   开始
  1. context.arc(x, y, r, startAngle, endAngle, anticlockwise)    //语法

 其中：

  x 代表圆心横坐标

  y 代表圆心纵坐标

  r 代表弧半径

  startAngle 代表起始弧度

  endAngle 代表结束弧度

  anticlockwise 代表弧的方向，true为逆时针，false为顺时针



//弧线   end



 　　ctx.beginPath(); 
			  　　ctx.arc(300, 300, 130, 310, Math.PI, false);  
			  　　ctx.strokeStyle = '#000';  
			  　　ctx.stroke();  
			  　　ctx.closePath(); 


 









    </script>
    
</body>


</html>




 


Canvas 画文字实例：


 




<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvas</title>
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 </style>
 <script type="text/javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$('can');
        var cans = can.getContext('2d');
        cans.font = 'bold 144px consolas';
        cans.textAlign = 'left';
        cans.textBaseline = 'top';
        cans.strokeStyle = '#DF5326';
        cans.strokeText('Hello', 100, 100);
        cans.font = 'bold 144px arial';
        cans.fillStyle = 'red';
        cans.fillText('World', 300,300);
    }
    function img_click(){
        var can = $$('can');
        var cans = can.getContext('2d');
        cans.clearRect(0,0,800,600);
    }
 </script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>
</body>
</html>




 


Canvas 图像切割


 




<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvas</title>
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 </style>
 <script type="text/javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$('can');
        var cans = can.getContext('2d');
        var objImg = new Image();
        objImg.src = 'lin.jpg';
        objImg.onload = function (){
            cans.drawImage(objImg,0,0,800,600);
        }
        cans.beginPath();
        cans.arc(400,300,200,0,Math.PI*2,1);
        cans.closePath();
        cans.clip();
    }
    function img_click(){
        var can = $$('can');
        var cans = can.getContext('2d');
        cans.clearRect(0,0,800,600);
    }
 </script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>
</body>
</html>

注：  切出来的图是圆形的。


案例2：



<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvas</title>
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 </style>
 <script type="text/javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$('can');
        var cans = can.getContext('2d');
        var objImg = new Image();
        objImg.src = 'lin.jpg';
        objImg.onload = function (){
            cans.drawImage(objImg,500,400,500,400,100,100,500,400);
        }
    }
 </script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>
</body>
</html>


注：  切出来的图是正方形的。









 


 


 


 


 


Canvas Api


http://javascript.ruanyifeng.com/htmlapi/canvas.html


 


参考博文：http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html


 


http://www.vaikan.com/html-5-canvas-tutorial-displaying-images/


 







            

            
posted @ 
2014-09-28 22:40 
Admin_info 
阅读(294) 
评论(0) 
 
收藏 
举报


        

	    
	    
    









    
    

    
    

    

        

    

        

            
                
                
            
        

    

    
    

    

    



	

	

	
	

	

	

	





    

        
青春时代是一个短暂的美梦，当你醒来时，这早已消失得无影无踪了。
点点Admin_info