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();
    //弧线   开始

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/

来源：https://www.cnblogs.com/xinlinux/p/3999140.html

标签

canvas

stroke