canvas绘制简单五子棋棋盘
生活随笔
收集整理的這篇文章主要介紹了
canvas绘制简单五子棋棋盘
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
什么是 canvas
?<canvas> 是HTML5中用于圖形的繪制的元素。<canvas> 標簽只是圖形容器，canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成。
Canvas（畫布）簡介
一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪制.
注意:?默認情況下 <canvas> 元素沒有邊框和內容。
<canvas>簡單實例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意:?標簽通常需要指定一個id屬性 (腳本中經常引用), width 和 height 屬性定義的畫布的大小.
案例：繪制15*15的五子棋棋盤
本例所用知識點：
首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
然后，創建 context 對象：
var ctx=c.getContext("2d");
getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
在Canvas上畫線，我們將使用以下兩種方法：
- moveTo(x,y) 定義線條開始坐標
- lineTo(x,y) 定義線條結束坐標
- stroke() ??方法來繪制線條
附上完整代碼：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title> <style type="text/css"> .chessboard{display:block;margin:50px auto; } </style><script>function drawChessBoard () {var c=document.getElementById("mycanvas");context=c.getContext("2d");context.fillRect(15,435,15,435);for(var i = 0; i < 15; i++){context.moveTo(15 + i * 30 , 15);context.lineTo(15 + i * 30 , 435);//垂直方向畫15根，相距30pxcontext.stroke();context.moveTo(15 , 15 + i * 30);context.lineTo(435 , 15 + i * 30); //水平方向畫15根，相距30pxcontext.stroke();}}</script> </head> <body onload="drawChessBoard()"><canvas id="mycanvas" width="450px" height="450px"class="chessboard"></canvas></body> </html>?
總結
以上是生活随笔為你收集整理的canvas绘制简单五子棋棋盘的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 移动端 - Android客户端性能测试
- 下一篇： html字体怎么变大,网页字体怎么变大（