canvas系列教程2-基本知识

来源：互联网发布：小米刷机端口被关闭编辑：程序博客网时间：2024/06/07 11:38

canvas基本知识

创建一个画布canvas

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <canvas id="can" width="400" height="300">            对不起，你的浏览器不支持canvas元素，请升级。        </canvas>    </body></html>

以上代码创建了一个id为c1的canvas,canvas的宽度为400，高度为300。

注意：

1.创建的canvas 在浏览器中看不到，因为它默认是透明的。

2.canvas比较特殊，我们最好不要用css样式定义宽度和高度，直接使用width和height定义就好，默认情况下canvas的width是300，height是150。

3.canvas标签中间的文字不是必须的，但canvas的结束标签是必须的，当浏览器不支持canvas 元素时，canvas标签中的文字就会显示出来。

4.默认情况下元素没有边框和内容。

提示:你可以在HTML页面中使用多个<canvas>元素。

使用 style 属性来添加边框:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

理解canvas坐标系

加入了canvas元素之后，我们就可以通过JavaScript，使用canvas元素提供的API操作canvas,在canvas上绘图。在绘图之前，我们需要了解canvas元素的坐标系，canvas 是一个二维网格，canvas 的左上角坐标为 (0,0)，canvas的坐标系如图：

这里写图片描述

获取canvas环境上下文

在定义好了canvas之后，我们就可以使用JavaScript访问canvas元素，使用canvas提供的一系列API。在使用canvas的时候，首先得到canvas的环境上下文，有了canvas的环境上下文，才能够对canvas进行相应操作，可以通过以下方式获取环境上下文：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <canvas id="myCanvas"></canvas>        <script type="text/javascript">            var canvas=document.getElementById('myCanvas');            var ctx=canvas.getContext('2d');        </script>    </body></html>

图形API

创建canvas和获取了canvas的环境上下文之后，就可以开始进行绘图了。绘图的方式有两种：

图形操作
图像操作

要使用canvas的API进行绘图，通常需要进行下列步骤：

获取canvas元素，通过document.getElementById()取得元素。
获取canvas元素的环境上下文。通过canvas.getContext(‘2d’) 获取2D图像上下文。
确定绘图模式。使用canvas绘式有两种两种模式，一种是fill,另外一种是stroke。

fill 是填充的意思，使用该方式模式进行绘图会把颜色填充整个图形。

stroke 只会进行描边框。
设定绘图样式。

通过fillStyle 和 strokeStyle指定绘图样式，fillStyle和strokeStyle分别对应fill模式和stroke模式。

绘图样式包括绘图的颜色及渐变方式，通常情况下默认的绘图样式颜色是#000000，也就是黑色。
指定线宽。可以通过lineWidth设定绘制的线宽，默认值是1.0像素。

<!DOCTYPE html><html>    <head>         <meta charset="utf-8">         <title>canvas系列教程</title>     </head>    <body>        <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">        您的浏览器不支持 HTML5 canvas 标签。        </canvas>        <script>            //首先，找到 <canvas> 元素:            var c=document.getElementById("myCanvas");            //获取2d上下文            var ctx=c.getContext("2d");            //下面的两行代码绘制一个红色的矩形：            ctx.fillStyle="#FF0000";            ctx.fillRect(0,0,150,75);        </script>    </body></html>

理解canvas的路径

canvas 中所有的图形可以看成一条路径，这条路径包含0个或者多个子路径。我们可以把路径看成当前canvas中所有图形的集合，而每一个图形就是一条子路径，一条子路径是由一系列点的集合组成。举个例子，我们在canvas中化了一个圆和一条直线，那么可以认为当前canvas中包含两条子路径，一条是圆，一条是直线，这两个图形都是由一个个点集组成，这个圆称为一个闭合的路径，而线是没有闭合的路径。显然，所谓闭合就是整个图形是封闭的，图形的开始点和结束点相互连接。

实际上，为了提高绘制的效率，当使用canvas进行绘图的时候，所有的图形操作都只是当前子路径上填加图形，并不是真正的调用绘图操作。比如使用lineTo()进行画线操作，实际上它知识往当前子路径填加一条直线，最终调用stroke或者fill的时候，才是真正进行绘图。

路径操作API

描述方法 moveTo(x,y) 把路径移动到画布中的指定点，不创建线条。 lineTo(x,y) 添加一个新点，然后在画布中创建从该点到最后指定点的线条。 rect(x,y,w,h) 创建矩形。 arc(x,y,radius,startAngle,endAngle,anticClock) 创建弧/曲线（用于创建圆形或部分圆）。 arcTo(x1,y1,x2,y2,radius) 创建两切线之间的弧/曲线。 bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 创建三次贝塞尔曲线。 quadraticCurveTo(cpx,cpy,x,y) 创建二次贝塞尔曲线。 fill() 填充当前绘图（路径） clip() 从原始画布剪切任意形状和尺寸的区域 stroke() 绘制已定义的路径 beginPath() 起始一条路径，或重置当前路径 closePath() 创建从当前点回到起始点的路径 isPointinPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false。

绘制线条

开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：
这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>canvas绘制直线</title>    </head>    <body>        <canvas id="myCanvas" ></canvas>        <script>            var c=document.getElementById("myCanvas");            var ctx=c.getContext("2d");            ctx.beginPath();            ctx.moveTo(0,0);            ctx.lineTo(300,150);            ctx.stroke();        </script>    </body></html>

0 0