码迷,mamicode.com
首页 > 其他好文 > 详细

Canvas -

时间:2014-09-29 01:09:37      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   os   ar   sp   div   on   c   

<!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();
    
    </script>
    
</body>


</html>

 

Canvas -

标签:style   blog   color   os   ar   sp   div   on   c   

原文地址:http://www.cnblogs.com/xinlinux/p/3999140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!