<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>clearRect()</title>
    <style>
        body { background: url("./images/bg2.jpg") repeat; }
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的瀏覽器居然不支持Canvas？！趕快換一個吧??！
    </canvas>
</div>

<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0,0,800,600);

        //清空畫布
        context.clearRect(0,0,canvas.width,canvas.height);

    };
</script>
</body>
</html>

演示 22-1

運行結果：

清空畫布

橡皮擦就是這么簡單~

點泡泡小游戲

這里通過一個小游戲介紹一個交互性很強的API——isPointInPath()。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>點泡泡</title>
    <style>
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
    </style>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的瀏覽器居然不支持Canvas？！趕快換一個吧??！
    </canvas>
</div>

<script>
    var balls = [];
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    window.onload = function(){
        canvas.width = 800;
        canvas.height = 600;

        for(var i=0; i<50; i++){
            var aBall = {
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                r: Math.random() * 50 + 20
            };
            balls[i] = aBall;
        }

        draw();
        canvas.addEventListener("mousemove",detect);
    };

    function draw(){
        for(var i=0; i<balls.length; i++){
            context.beginPath();
            context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI *2);
            context.globalAlpha = 0.5;

            var R = Math.floor(Math.random() * 255);
            var G = Math.floor(Math.random() * 255);
            var B = Math.floor(Math.random() * 255);

            context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
            context.fill();

        }
    }

    function detect(){
        var x = event.clientX - canvas.getBoundingClientRect().left;
        var y = event.clientY - canvas.getBoundingClientRect().top;

        for(var i=0; i<balls.length; i++){
            context.beginPath();
            context.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2);

            if(context.isPointInPath(x,y)){
                context.fillStyle = "rgba(255,255,255,0.1)";
                context.fill();
            }
        }
    }

</script>
</body>
</html>

演示 22-2

運行結果：

點泡泡小游戲

這個是基于示例 19-2小的交互游戲。鼠標移動到小球上，小球就會漸漸消失。這里用到了鼠標事件canvas.addEventListener("mousemove",function);以后會詳細說。還用到了一個新的API——isPointInPath()。這個方法接收兩個參數(shù)，就是一個點的坐標值，用來判斷指定的點是否在當前路徑中。若是，則返回true。

像素操作API

還有最后六個關于像素操作的API，基本不會用到，這里就不詳細說了。列表如下。

屬性	描述
`width`	返回 `ImageData` 對象的寬度
`height`	返回 `ImageData` 對象的高度
`data`	返回一個對象，其包含指定的 `ImageData` 對象的圖像數(shù)據

方法	描述
`createImageData()`	創(chuàng)建新的、空白的 `ImageData` 對象
`getImageData()`	返回 `ImageData` 對象，該對象為畫布上指定的矩形復制像素數(shù)據
`putImageData()`	把圖像數(shù)據（從指定的 `ImageData` 對象）放回畫布上

如果童鞋們想深入學習，可以直接查HTML5 Canvas參考手冊，自行了解學習。

Canvas 圖形庫

不知不覺寫了22個章節(jié)，所有我們寫的圖形其實都可以封裝在一個JS文件里，這個文件就是屬于我們自己的圖形庫、圖形引擎。當然，第三方也提供了很多優(yōu)秀的圖形庫，這里推薦三個給大家。

canvasplus
Artisan JS
Rgraph

大家有興趣的話可以自行查閱了解一下。

Canvas API沒有結束

Canvas的標準一直在更新，大家可以訪問 W3C Canvas標準查看最新的API。但是一般最新的API很多瀏覽器都不會立刻去支持，所以可以等待大多數(shù)瀏覽器穩(wěn)定支持了之后，我們再去掌握它也不遲。

至此，目前所有的Canvas API我們就已經講完了。掌握了所有的繪畫方法和技巧，成為一個藝術家，并不是我們最終的目標?；蛟S，現(xiàn)在大家已然可以繪制出優(yōu)美的圖形，或抽象、或清新?；蛟S，現(xiàn)在大家已經可以將Canvas API銘記于心，并且能夠熟練使用它。

但是要知道，這只是基礎。在之后的日子里，我們要基于Canvas 學習動畫。眾所周知，動畫是由一幀幀的畫面構成，不會繪畫哪來動畫？所以，Canvas繪制只是后面學習的基礎。

這不是結束，而是一個新的開始。讓我們繼續(xù)前進~

上一篇：Ch5 繪制矩形下一篇：Ch19 全局陰影與圖像合成

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Ch22 最后的API

橡皮擦clearRect()

點泡泡小游戲

像素操作API

Canvas 圖形庫

Canvas API沒有結束

橡皮擦`clearRect()`