Canvas学习和基本属性介绍以及判断浏览器是否支持canvas

一、 创建canvas元素

如果要向界面中添加canvas元素，可以使用以下代码

<canvas id="myCanvas" style="border:1px solid;" width="300"  height="150"></canvas>
  
 <script>
   var c = document.getElementById("myCanvas");//获取canvas元素
   var ctx = c.getContext("2d");//通过canvas的getContext方法来获取其上下文，创建context对象，以允许其进行2d绘制
</script>    
   

这里的getContext("2d"),是用于返回内建的html5,对象（CanvasRenderingContext2D），使用该对象可在canvas中绘制图形，目前强制支持的只有2d，即二维绘图，如果将来能够支持三维绘图，则getContext方法可能会允许使用3d这个参数。

二、判断浏览器是否支持canvas

判断浏览器是否支持canvas可以判断浏览器中是否支持getContext函数，代码如下：

var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
    console.log("您的浏览器支持Canvas!");
   
} else {
   console.log("您的浏览器不支持canvas!");
}

三、绘制简单的图形

3.1绘制直线

moveTo()：规定起始点，简历新的子路径

lineTo()：规定直线的终点，如果没有使用moveTo，则lineTo的功能等同于moveTo（）

stroke()：该方法用于绘制一条直线，

//绘制直线
var c1 = document.getElementById("myCanvas1");
var ctx1 = c1.getContext("2d");
ctx1.moveTo(0, 0);
ctx1.lineTo(200, 100);
ctx1.stroke();

3.2绘制矩形

// 绘制矩形
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
    console.log("您的浏览器支持Canvas!");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF00FF";
    ctx.fillRect(50, 25, 100, 50);
    ctx.strokeStyle = "#ffffff";
    ctx.strokeRect(75, 35, 50, 25);
} else {
    alert("您的浏览器不支持canvas!");
}

上述代码中，fillStyle用于填充图形，fillRect用于绘制填充的矩形，fillRect（x,y,width,height）;

strokeStyle用于绘制线条，strokeRect（x,y,width,height）用于绘制线条的矩形

3.3绘制圆形

主要使用以下方法

beginPath()：用于开始绘制路径；

ctx.arc(x,y,startAngle,endAngle,anticlockwise)，其中anticlockwise表示是否是顺时针绘制；

closePath()：表示将图形闭合起来

//绘制圆形 半径为50像素的圆形
var c2 = document.getElementById("myCanvas2");
var ctx2 = c2.getContext("2d");
ctx.fillStyle = "#FF00FF";
ctx2.beginPath();
ctx2.arc(100, 75, 50, 0, Math.PI * 2, true);
ctx2.closePath();
ctx2.fill();

其中Math.PI值为Π（圆周率3.1415.....）

3.4绘制三角形

//绘制三角形 4:实心 5:实线
var c4 = document.getElementById("myCanvas4");
var ctx4 = c4.getContext("2d");
ctx4.fillStyle = "#ff00ff";
ctx4.beginPath();
ctx4.moveTo(25, 25);
ctx4.lineTo(150, 25);
ctx4.lineTo(25, 150);
ctx4.fill();

var c5 = document.getElementById("myCanvas5");
var ctx5 = c5.getContext("2d");
ctx5.strokeStyle = "#ff00ff";
ctx5.beginPath();
ctx5.moveTo(25, 25);
ctx5.lineTo(150, 25);
ctx5.lineTo(25, 150);
ctx5.closePath();
ctx5.stroke();

绘制时注意使用beginPath（）和closePath（）来闭合路径，注意三个坐标点的指向

3.5清空画布

使用clearRect可以清楚指定区域的所有图形。

代码如下

<button type="button" onclick="clearMap">清空画布</button>
<script>
//下面代码可以清除上述的三角形
function clearMap() {
    ctx5.clearRect(0, 0, 300, 150);
}
</script>

 

看完上述文章即可自己动手画一下简单的canvas图形了，后续文章会继续讲解canvas的图形变换，图形组合裁切，canvas中使用图片，以及利用canvas制作图片切片，欢迎大家评论留言指正不足