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绘制简单五子棋棋盘相关推荐

java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
html5 简单图片效果,【HTML5】Canvas绘制简单图片教程，
[HTML5]Canvas绘制简单图片教程, 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象的onload方法,调用context对象的drawIm ...
用canvas绘制简单的几何图形
文章目录添加canvas 调用canvas的API接口绘制简单的图形直线三角形矩形圆清空画布 canvas是一块矩形区域,相当于一块画布.它本身不具有绘图功能,绘图功能主要是由JavaS ...
canvas绘制简单动画思路总结
使用canvas绘制动画原理就是不断的绘制canvas图形,当画的速度够快,看上去就能动起来.这里需要了解一下屏幕刷新率,根据效果来调整绘制的速度(1秒刷新60次屏幕刷新率保持在60次/秒保障动画效 ...
使用html5 canvas绘制简单图形小作品~灰太狼
<!-- 作者:1457225624@qq.com 时间:xxxx-xx-xx 描述:大家好!我是小张,今天我用html5,,canvas的画布画出了一个小作品, 画的不好看,,,还请原谅,,下 ...
html5 直线的两头弯曲,html5教程（二）（canvas绘制简单的直线）
Html5_convas var elem = document.getElementById("myConvas"); if (elem && elem.getC ...
android 用canvas 绘制简单圆形时钟
写笔记写写不过人家 http://blog.csdn.net/u010575173/article/details/52701936 1,Android - Paint基础在自定义控件时,经常需要使 ...
html+js：画布canvas + 绘制简单矩形
html5支持canvas标签 canvas创建一个画布,通过.getContext方法创建一个CanvasRenderingContext2D对象进行图案的绘制,具体的方法可以前往HTML Canv ...
canvas绘制中国象棋棋盘
棋盘 board.html <!doctype html> <html><head><meta charset="gb2312"/> ...