日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

好吧，新的一天來了，我才開始動筆，真夠懶得：）昨天說了今天我們要畫一個球，在canvas上。好吧，這是游戲的入門的第一步，只是昨天沒寫完，所以。。。

成都創(chuàng)新互聯(lián)公司是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、做網(wǎng)站、成都做網(wǎng)站、網(wǎng)站備案、服務(wù)器租用、域名注冊、軟件開發(fā)、微信小程序等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營推廣經(jīng)驗的科技公司，有著多年的網(wǎng)站建站經(jīng)驗，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個面向全國乃至全球的業(yè)務(wù)窗口：建站咨詢電話：13518219792

上面的代碼是在VS11 beta上寫的，實在是太舒服了，vs是非常強(qiáng)大的編輯器。上面的代碼中我們繪制了一個大大的圓，并且著色了，紅邊和黃心。
看下 arc (弧度)方法，昨天的文章里有他的鏈接地址，我在這里粘貼下。

The arc(x, y, radius, startAngle, endAngle, anticlockwise) method draws an arc.

arc(x,y,弧度,開始角度點，結(jié)束角度點， 順時針)，角度點你可能不是很清楚如何表示，這里是用Math.PI 圓周率來表示 6.28是周長。 想畫圓的一部分也就是一段弧線，可以取開始的角度點和結(jié)束的角度點。

那么下一步就是要把圓能夠畫到我們棋盤上。其實，這個很簡單，只要我們把x,y和radius的值調(diào)整下就會繪制出來。我把昨天代碼寫的更“專業(yè)”了一點。所以，今天的代碼會在新的代碼基礎(chǔ)上增加了。先看下改動過的代碼。

  
 
 
 
   
  
  
  
var canvas = document.getElementById("canvas");   
   
  
  
  
var ctx = canvas.getContext("2d");   
   
  
  
  
var g = {   
   
  
  
  
    cellCount: 9,   
   
  
  
  
    lineCount: 5,   
   
  
  
  
};   
   
  
  
  
   
   
  
  
  
var map = {   
   
  
  
  
    startX: 20.5,   
   
  
  
  
    startY: 60.5,   
   
  
  
  
    cellWidth: 30,   
   
  
  
  
    getEndX: function () {   
   
  
  
  
        return g.cellCount * this.cellWidth + this.startX;   
   
  
  
  
    },   
   
  
  
  
    getEndY: function () {   
   
  
  
  
        return g.cellCount * this.cellWidth + this.startY;   
   
  
  
  
    },   
   
  
  
  
    draw: function () {   
   
  
  
  
        ctx.beginPath();   
   
  
  
  
   
   
  
  
  
        ctx.moveTo(this.startX, this.startY);   
   
  
  
  
   
   
  
  
  
        for (var i = 0; i <= g.cellCount; i++) {   
   
  
  
  
   
   
  
  
  
            var p1 = i * this.cellWidth + this.startX;   
   
  
  
  
            ctx.moveTo(p1, this.startY);   
   
  
  
  
            ctx.lineTo(p1, this.getEndY());   
   
  
  
  
   
   
  
  
  
            var p2 = i * this.cellWidth + this.startY;   
   
  
  
  
            ctx.moveTo(this.startX, p2);   
   
  
  
  
            ctx.lineTo(this.getEndX(), p2);   
   
  
  
  
   
   
  
  
  
        }   
   
  
  
  
        ctx.strokeStyle = "#456";   
   
  
  
  
        ctx.stroke();   
   
  
  
  
    },   
   
  
  
  
   
   
  
  
  
};   
   
  
  
  
   
   
  
  
  
map.draw(); 
  
 
 

是吧，更專業(yè)了吧，這樣就不會定義一坨的function，到時候沒出找，而是定義在一個對象里，這種封裝也能避免命名沖突。而且，棋盤起始的位置我也做了調(diào)整，只要修改起始的x y值，棋盤就會在這個點開始畫。那，現(xiàn)在我們要在第五行，第六列畫一個黃色的球，該怎么畫呢？只需要給map增加一個方法，再調(diào)用這個方法就行啦

  
 
 
 
   
  
  
  
drawBubble: function (x, y) {   
   
  
  
  
    var px = this.startX + this.cellWidth * x - this.cellWidth / 2;   
   
  
  
  
    var py = this.startY + this.cellWidth * y - this.cellWidth / 2;   
   
  
  
  
    ctx.beginPath();   
   
  
  
  
    ctx.arc(px, py, 12, 0, Math.PI * 2);   
   
  
  
  
    ctx.strokeStyle = "white";   
   
  
  
  
    ctx.fillStyle = "yellow";   
   
  
  
  
    ctx.fill();   
   
  
  
  
    ctx.stroke();   
   
  
  
  
}, 
  
 
 

畫出來刷新下，居然是第六行，第五列，我們搞錯了嗎？代碼沒有，只是我們誤認(rèn)為x是行y是列 按順序叫順口了，其實是反過來的：）

泡泡既然能畫出來，也要能清除才是，不然沒法玩，所以再增加一個清除泡泡的方法。

  
 
 
 
   
  
  
  
clearBubble: function (x, y) {   
   
  
  
  
    var px = this.startX + this.cellWidth * x - this.cellWidth + 0.5;   
   
  
  
  
    var py = this.startY + this.cellWidth * y - this.cellWidth + 0.5;   
   
  
  
  
    ctx.beginPath();   
   
  
  
  
    ctx.clearRect(px, py, this.cellWidth - 1, this.cellWidth - 1);   
   
  
  
  
    ctx.stroke();   
   
  
  
  
} 
  
 
 

ok，是不是很霸氣？ o(∩_∩)o 哈哈，不過在獲取泡泡的位置時是不是很糾結(jié)，為什么畫泡泡是 width/2 而擦除要加0.5？

畫圓是從中心點開始畫，所以要去掉半徑，而擦數(shù)不能擦掉我們的棋盤線，所以要偏移0.5 。

網(wǎng)站題目：HTML 5游戲制作之五彩連珠（畫圖）
鏈接分享：http://www.dlmjj.cn/article/coocjpd.html