canvas绘图

效果一：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var canvas = document.getElementById("my_canvas");
            if (canvas.getContext) {
                var context = canvas.getContext("2d");
                context.fillStyle = "rgb(200,0,0)";
                context.fillRect(10, 10, 100, 100);
                context.fillStyle = "rgb(0,200,0)";
                context.fillRect(20, 20, 100, 100);
                context.fillStyle = "rgb(0,0,200)";
                context.fillRect(30, 30, 100, 100);
            }
            else {
            }
        })
    
       
    </script>
</head>
<body>
    <canvas id="my_canvas" width="150" height="150">Fallback content here</canvas>
</body>
</html>

效果二

<!DOCTYPE html>
<html lang="en">
<head>
        <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
    <title></title>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var canvas = document.getElementById("logo");
            if (canvas.getContext) {
                var context = canvas.getContext("2d");
                context.fillStyle = "#f00";
                context.strokeStyle = "#f00";
                context.font = "italic 40px sans-serif";
                context.textBaseline = "top";
                context.fillText("Bradley", 60, 0);
                context.lineWidth = 2;
                context.beginPath();
                context.moveTo(0, 40);
                context.lineTo(30, 0);
                context.lineTo(60, 40);
                context.lineTo(285, 40);
                context.stroke();//调用函数
                context.closePath();//停止
                context.save();
                // 移动整个画布
                context.translate(20, 20);
                // 在原点处绘制长20宽20的正方形
                context.fillRect(0, 0, 20, 20);
                //fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
                 context.fillStyle = "#fff";
                //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
                  context.strokeStyle = "#fff";

                //var gradient = context.createLinearGradient(0, 0, 0, 40);
                //gradient.addColorStop(0, '#a00');
                //gradient.addColorStop(1, '#f00');
                //context.fillStyle = gradient;
                //context.strokeStyle = gradient;


                context.lineWidth = 2;
                context.beginPath();
                context.moveTo(0, 20);
                context.lineTo(10, 0);
                context.lineTo(20, 20);
                context.lineTo(0, 20);
                context.fill();
                context.closePath();
                context.restore();


                
            }
            else {
            }
        })


    </script>
</head>
<body>
    <canvas id="logo" width="400" height="150">Bradley Dan</canvas>
</body>
</html>

效果图：　　

 

posted @ 2012-11-07 19:01  bradleydan  阅读(103)  评论(0)    收藏  举报