画布canvas，表单选项，随机矩形和圆，文字图像表示

1.canvas画布是web中显示的图形区，上下文context是与画布关联的对象，它定义了一组属性和方法，可以在画布上进行绘画保存恢复等操作。context支持很多接口 2d,webGL等，指定了接口才能进行绘制。

2.ie9以后的版本才支持canvas

3.表单下拉选项的应用：

var selectObj = document.getElementById("shape");  //先取表单的下拉菜单

var index = selectObj.selectedIndex;  //取当前用户或者默认选择的选项，此处取出一个数组[]0开始

var shape = selectObj[index].value;  //根据数组取出value值来使用

4.使用context上下文的fillStyle来选颜色 fillRect来填充一个矩形, 使用fillStyle时，只要设定了颜色，画布就会用这个颜色填充任何东西，所以如果画布之前有其他颜色的话，会被新的颜色所覆盖掉。

5.绘制路径形状，用context的相关方法，如

    context.beginPath();   //开始绘制
    context.moveTo(100,150);  //相当于把画笔移动到某一点上，但是还没有开始画
    context.lineTo(250,75);  //画到某一点
    context.lineTo(125,30);
    context.closePath();  //关闭路径，从上一个lineTo点，自动到beginPath的坐标，等于封上口
    context.lineWidth = 5;
    context.stroke();   //开始勾画
    context.fillStyle = "red";
    context.fill();   //填充函数

6.关于画圆的方法 context.arc(x, y, radius, startAngel, endAngel, direction)  见图

7.使用arc方法，需要将度转换为弧度来计算，所以可以用函数

function degreeToRadians(degree)

{

return (degree * Math.PI)/180;

}

context.arc(100, 100, 75, 0, degreeToRadians(270), true);

8.画布上绘制文字:

9.注意设置时，有重复属性没有关系，js会从上到下依次执行，所以都会执行到，如

    context.font = "bold 1em sans-serif";
    context.textAlign = "left";
    context.fillText("I saw this tweet", 20, 40);

    context.font = "bold 1em sans-serif";
    context.textAlign = "right";

10.strokeRect 绘制空心的矩形轮廓

11.创建图像元素  

  var twitterBird = new Image();
    twitterBird.src = "twitterBird.png";
    twitterBird.onload = function()   //确保图像完全加载
    {
        context.drawImage(twitterBird, 20, 120, 70, 70);
    };

12.画布<canvas>xxxx</canvas> 中间内容为不支持画布浏览器看到的内容

完整代码

window.onload = function ()
{
    var button = document.getElementById("previewButton");
    button.onclick = previewHandler;
};


function previewHandler()
{
    var canvas = document.getElementById("tshirtCanvas");
    var context = canvas.getContext("2d");
    fillBackgroundColor(canvas, context);
    var selectObj = document.getElementById("shape");
    var index = selectObj.selectedIndex;
    var shape = selectObj[index].value;


    if (shape == "squares")
    {
        for (var squares = 0; squares < 20; squares++)
        {
            drawSquare(canvas, context);
        }
    }
    else if (shape == "circles")
    {
        for (var circles = 0; circles < 20; circles++)
        {
            drawCircle(canvas, context);
        }
    }


    drawText(canvas, context);
    drawBird(canvas, context);
}


function drawBird (canvas, context)
{
    var twitterBird = new Image();
    twitterBird.src = "twitterBird.png";
    twitterBird.onload = function()
    {
        context.drawImage(twitterBird, 20, 120, 70, 70);
    };
}


function drawText (canvas, context)
{
    var selectObj = document.getElementById("foregroundColor");
    var index = selectObj.selectedIndex;
    var fgColor = selectObj[index].value;


    context.fillStyle = fgColor;
    context.font = "bold 1em sans-serif";
    context.textAlign = "left";
    context.fillText("I saw this tweet", 20, 40);


    /*调用twitter的API,需要有授权，此处暂时隐藏
    selectObj = document.getElementById("tweets");
    index = selectObj.selectedIndex;
    var tweet = selectObj[index].value;
    context.font = "italic 1.2em serif";
    context.fillText(tweet, 30, 100);
    */


    context.font = "bold 1em sans-serif";
    context.textAlign = "right";
    context.fillText("and all I got was this lousy t-shirt", canvas.width-20, canvas.height-40);
}


function fillBackgroundColor(canvas, context)
{
    var selectObj = document.getElementById("backgroundColor");
    var index = selectObj.selectedIndex;
    var bgColor = selectObj[index].value;


    context.fillStyle = bgColor;
    context.fillRect(0,0,600,200);
}


function drawSquare(canvas, context)
{
    var w = Math.floor(Math.random() * 40);
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);


    context.fillStyle = "lightblue";
    context.fillRect(x,y,w,w);
}


function degreeToRadians(degree)
{
    return (degree * Math.PI)/180;
}


function drawCircle(canvas, context)
{
    var radius = Math.floor(Math.random() * 40);
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);


    context.beginPath();
    context.arc(x, y, radius, 0, degreeToRadians(360), true);
    context.fillStyle = "lightblue";
    context.fill();
}

function updateTweets(tweets)
{
    var tweetsSelection = document.getElementById("tweets");
    for (var i = 0; i < tweets.length; i++)
    {
        var tweet = tweets[i];
        var option = document.createElement("option");
        option.text = tweet;
        option.value = tweet;
        tweetsSelection.options.add(option);
    }
    tweetsSelection.selectedIndex = 0;
}


/**
 * Created by andrewlee on 13-10-31.
 */


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        canvas{border:1px solid black;}
    </style>
     <script src="tweetshirt.js"></script>


</head>


<body>
<canvas id="tshirtCanvas" width="600" height="200">
    <p>Please upgrade your browser to use TweetShirt!</p>
</canvas>

<form>
    <p>
        <label for="backgroundColor">Select background color:</label>
        <select id="backgroundColor">
            <option value="white" selected="selected">White</option>
            <option value="black">Black</option>
        </select>
    </p>
    <p>
        <label for="shape">Circles or squares?</label>
        <select id="shape">
            <option value="none" selected="selected">Neither</option>
            <option value="circles">Circles</option>
            <option value="squares">Squares</option>
        </select>
    </p>
    <p>
        <label for="foregroundColor">Select text color:</label>
        <select id="foregroundColor">
            <option value="black" selected="selected">Black</option>
            <option value="white">White</option>
        </select>
    </p>
    <p>
        <label for="tweets">Pick a tweet:</label>
        <select id="tweets">
        </select>
    </p>
    <p>
        <input type="button" id="previewButton" value="Preview">
    </p>
</form>


<script src = "http://api.twitter.com/statuses/user_timeline/wickedsmartly.json?callback=updateTweets"></script>
</body>
</html>