您的位置：首页 > 其它

Canvas -画图

2014-09-28 22:40 141 查看 
2014-09-3009:14:57
<!doctypehtml>
<html>

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

<style>

</style>
<body>
<canvaswidth=="500"height="500"id="demo">
您的浏览器不支持canvas！
</canvas>

<script>
varcanvas=document.getElementById('demo');
//alert(canvas);

varctx=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();

//弧线开始
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画文字实例：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>Canvas</title>
</head>
<styletype="text/css">
body{margin:20pxauto;padding:0;width:800px;}
canvas{border:dashed2px#CCC}
</style>
<scripttype="text/javascript">
function$$(id){
returndocument.getElementById(id);
}
functionpageLoad(){
varcan=$$('can');
varcans=can.getContext('2d');
cans.font='bold144pxconsolas';
cans.textAlign='left';
cans.textBaseline='top';
cans.strokeStyle='#DF5326';
cans.strokeText('Hello',100,100);
cans.font='bold144pxarial';
cans.fillStyle='red';
cans.fillText('World',300,300);
}
functionimg_click(){
varcan=$$('can');
varcans=can.getContext('2d');
cans.clearRect(0,0,800,600);
}
</script>
<bodyonload="pageLoad();">
<canvasid="can"width="800px"height="600px"onclick="img_click(this);"></canvas>
</body>
</html>
Canvas图像切割
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>Canvas</title>
</head>
<styletype="text/css">
body{margin:20pxauto;padding:0;width:800px;}
canvas{border:dashed2px#CCC}
</style>
<scripttype="text/javascript">
function$$(id){
returndocument.getElementById(id);
}
functionpageLoad(){
varcan=$$('can');
varcans=can.getContext('2d');
varobjImg=newImage();
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();
}
functionimg_click(){
varcan=$$('can');
varcans=can.getContext('2d');
cans.clearRect(0,0,800,600);
}
</script>
<bodyonload="pageLoad();">
<canvasid="can"width="800px"height="600px"onclick="img_click(this);"></canvas>
</body>
</html>注：切出来的图是圆形的。案例2：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>Canvas</title>
</head>
<styletype="text/css">
body{margin:20pxauto;padding:0;width:800px;}
canvas{border:dashed2px#CCC}
</style>
<scripttype="text/javascript">
function$$(id){
returndocument.getElementById(id);
}
functionpageLoad(){
varcan=$$('can');
varcans=can.getContext('2d');
varobjImg=newImage();
objImg.src='lin.jpg';
objImg.onload=function(){
cans.drawImage(objImg,500,400,500,400,100,100,500,400);
}
}
</script>
<bodyonload="pageLoad();">
<canvasid="can"width="800px"height="600px"onclick="img_click(this);"></canvas>
</body>
</html>

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

CanvasApihttp://javascript.ruanyifeng.com/htmlapi/canvas.html参考博文：/article/4897820.htmlhttp://www.vaikan.com/html-5-canvas-tutorial-displaying-images/
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航