html5中的canvas還記得嗎(2，反覆橫跳的矩形)，前端基礎
持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第21天，點選檢視活動詳情
前言
上次內容帶小夥伴重溫了下canvas的概念以及注意的地方，這次就開始講js控制畫布，開始畫畫了，重頭戲來了喔。
繪製圖像
canvas元素本身是沒有繪圖能力的。所以畫圖都是在js中完成的。 ```html
``` - 首先通過id獲取canvas的元素
js
var myCanvas=document.getElementById("myCanvas");
- 建立 context 物件，getContext("2d")方法是的HTML5內部的，它返回一個物件，裡面有繪製路徑、矩形、圓形、字元以及新增影象的方法。可以理解是我們的畫筆。
js
var ctx=myCanvas.getContext("2d");
- 簡單的矩形
js
// 填充顏色
ctx.fillStyle="#fcb4b4";
// 引數，x，y座標，寬高
ctx.fillRect(0,0,300,200);
我們為了視覺看的更清晰一點，一般可以給canvas元素設定樣式邊框，這樣我們就知道畫布的大小和位置了
```css
myCanvas{
border: 1px solid #000;
} ``` 通過新增樣式，我們可以看出畫布是很明顯了。那麼得到效果就是如下了
其實敲程式碼也沒那麼複雜的，搞清楚想要什麼樣的效果就好了，是不是很簡單。
- 動起來
通過定時器，一段時間後修改矩形的座標
js
var x =0,y=0
setInterval(()=>{
ctx.fillRect(x++,y++,300,200);
},50)
但是效果不盡如意，因為每次調整座標後沒有清除畫布，所以之前的矩形依然殘留在畫布上
那麼清除畫布的方法clearRect就該出場了，它也接受四個引數，分別是x，y座標，w，h寬高。這樣效果就好很多了。
js
var x =0,y=0
setInterval(()=>{
// 順序別搞反了，先清除，再畫
ctx.clearRect(0,0,500,500);
ctx.fillRect(x++,y++,300,200);
},50)
像讓它動起來是不難的，難得是我們控制它如何動，所以我們通過幾個變數，比如寬高，速度啥的，來控制不出畫布，總是在畫布內運動。重新修改了下程式碼，canvas的寬高，我們用變數來表示，為的就是後面好動態判斷。
```js
var x =0,y=0,w=300,h=200,xd=2,yd=2;
// 引數，x，y座標，寬高
ctx.fillRect(0,0,w,h);
setInterval(()=>{
if((x+w)>=500){
xd=-1
}else if(x<0){
xd=Math.abs(xd)
}
x+=xd
if((y+h)>=500){
yd=-1
}else if(y<0){
yd=Math.abs(yd)
}
y+=yd
// 順序別搞反了，先清除，再畫
ctx.clearRect(0,0,500,500);
ctx.fillRect(x,y,w,h);
},50)
``` 我也不知道為啥我的動圖會有這樣的效果，反正正常瀏覽器是沒問題的。
通過我們的一步一步的優化，最後的執行效果就很好看了，是不是很像小時候看電視沒訊號時候的畫面，反覆橫跳。是不是挺好玩的
總結
本次內容講到了js控制畫筆，在畫布上畫矩形，再通過簡單的js判斷，就實現了動起來的canvas效果，很簡單，以後再加上覆雜的運算，就能製作更多更好玩的遊戲出來，這次只是簡單瞭解了下js控制畫筆，後續能講的話，還是會完善的。
好啦，本節內容就總結到這裡。我的文章都是學習過程中的總結，希望能夠和小夥伴們共同進步共同學習，如果發現錯誤，也歡迎留言指出，我及時更正。