Canvas -画图

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

<html>

<head>

    <title>

    </title>

</head>

<style>

</style>

<body>

    <canvas width=="" height="" id="demo">

        您的浏览器不支持canvas！

    </canvas>

    <script>

        var canvas = document.getElementById('demo');

    //    alert(canvas);

     var ctx = canvas.getContext('2d');

     //alert(ctx)

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

//end

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

//end

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

//end

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

//end

    ctx.beginPath();

    ctx.arc(, , , , Math.PI*, true);

    ctx.lineWidth = 1.0;

    ctx.strokeStyle = "#000";

        ctx.closePath();

    ctx.stroke();

        //左空心眼睛

    ctx.beginPath();

    ctx.arc(, , , , Math.PI*, true);

    ctx.lineWidth = 1.0;

    ctx.strokeStyle = "#000";

        ctx.closePath();

    ctx.stroke();

        //右空心眼睛

    ctx.beginPath();

    ctx.arc(, , , , Math.PI*, true);

    ctx.lineWidth = 1.0;

    ctx.strokeStyle = "#000";

    ctx.closePath();

    ctx.stroke();

    //右实心眼睛

    ctx.beginPath();

    ctx.arc(, , , , Math.PI*, true);

    ctx.lineWidth = 1.0;

    ctx.fillStyle = "#000000";

    ctx.fill();

    ctx.shadowOffsetX = ; // 设置水平位移

    ctx.shadowOffsetY = ; // 设置垂直位移

    ctx.shadowBlur = ; // 设置模糊度

    ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色

    ctx.closePath();

    ctx.stroke();

    //左实心眼睛

    ctx.beginPath();

    ctx.arc(, , , , Math.PI*, true);

    ctx.lineWidth = 1.0;

    ctx.strokeStyle = "#000";

    ctx.fill();

    ctx.shadowOffsetX = ; // 设置水平位移

    ctx.shadowOffsetY = ; // 设置垂直位移

    ctx.shadowBlur = ; // 设置模糊度

    ctx.shadowColor = "rgba(0,0,0,1)"; // 设置阴影颜色

    ctx.closePath();

    ctx.stroke();

    //嘴

    ctx.beginPath();

    ctx.arc(    , , , , false);

    ctx.strokeStyle = "#000";

        ctx.closePath();

    ctx.stroke();

    //线 帽子线

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.closePath();

    ctx.stroke();

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    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:; 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', , );

        cans.font = 'bold 144px arial';

        cans.fillStyle = 'red';

        cans.fillText('World', ,);

    }

    function img_click(){

        var can = $$('can');

        var cans = can.getContext('2d');

        cans.clearRect(,,,);

    }

 </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:; 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,,,,);

        }

        cans.beginPath();

        cans.arc(,,,,Math.PI*,);

        cans.closePath();

        cans.clip();

    }

    function img_click(){

        var can = $$('can');

        var cans = can.getContext('2d');

        cans.clearRect(,,,);

    }

 </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/

相关文章