canvas的方法
    Canvas 是 HTML5 新增的标签，它是一项基于Web的技术，它可以通过 JavaScript 来实现各种绘图效果。Canvas 具有很多绘图方法，下面我们将对 Canvas 的绘图方法进行详细说明。
    一、Canvas 创建方法
    1.利用HTML5 的<canvas> 标签创建
    visual studio,notepad++等代码编辑器都支持HTML5，在学习 HTML5 时我们在文本编辑器中编写 HTML 代码，然后通过浏览器的渲染来显示页面。只需要在 HTML 文件中添加以下代码：
    ``` html
    <canvas id="canvas" width="500" height="500"></canvas>
    ```
    以上代码中，canvas 标签包含了一个 id 属性，用来指定该标签的唯一标识符，width 和 height 属性用来指定 Canvas 的宽度和高度。
    2.利用JavaScript 创建
    我们可以通过 JavaScript 来创建和添加一个 Canvas 元素，如下：
    ``` js
    var ateElement('canvas');
    canvas.width=300;
    canvas.height=300;
    document.body.appendChild(canvas);
    ```
    以上代码创建了一个 Canvas 元素，并且将其宽度和高度设置为 300，最后通过 docum
ent.body.appendChild() 方法将这个 Canvas 元素添加到 HTML 页面的 body 元素中。
    二、Canvas 绘制基本图形方法
html5颜代码    Canvas 提供了绘制各种基本图形的方法，其中矩形和弧形是最常用的绘图方法。
    1.线条
    Canvas 提供了以下绘制线条的方法：
    1.1 drawLine(x1,y1,x2,y2)
    这种绘制线条的方法非常简单，只需要指定起始点和终止点的横纵坐标，Canvas 就会自动绘制一条直线。例如：
    ``` js
    ctx.beginPath();
    veTo(20, 20);
    ctx.lineTo(100, 20);
    ctx.stroke();
    ```
    以上代码将会绘制一条从坐标 (20,20) 到 (100,20) 的直线。
    1.2 strokeRect(x,y,width,height)
    这种方法可以绘制一个带有边框的矩形，例如：
    ``` js
    ctx.strokeRect(20,20,50,50);
    ```
    以上代码将会绘制一个位于 (20,20) 位置，宽度为 50，高度为 50 的矩形。
    1.3 fillRect(x,y,width,height)
    这种方法可以绘制一个带有填充颜的矩形，例如：
    ``` js
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20,20,50,50);
    ```
    以上代码将会绘制一个红的矩形，位于 (20,20) 位置，宽度为 50，高度为 50。
    2.圆形
    以下绘制圆形的方法也是 Canvas 中比较常用的。
    2.1 arc(x,y,radius,startAngle,endAngle,anticlockwise)
    这种方法可以绘制一个圆弧或者一个完整的圆。
    ``` js
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
    ctx.stroke();
    ```
    以上代码将会绘制一个位于 (75,75) 位置，半径为 50 的完整的圆。
    3.文字
    在 Canvas 中可以绘制各种文字，包括中文和英文。
    3.1 fillText(text,x,y)
    这种方法可以在指定位置填充文字。例如：
    ``` js
    ctx.font = "30px Arial";
    ctx.fillText("Hello World",20,50);
    ```
    以上代码将会在 (20,50) 位置，以 30px 的字体大小绘制“Hello World”。
    3.2 strokeText(text,x,y)
    这种方法可以在指定位置描边文字，例如：
    ``` js
    ctx.font = "30px Arial";
    ctx.strokeText("Hello World",20,50);
    ```
    以上代码将会在 (20,50) 位置，以 30px 的字体大小描边“Hello World”。
    三、Canvas 图像操作方法
    Canvas 中还有很多图像操作方法，包括裁剪、旋转、缩放等，下面我们会进行详细解释。
    1.裁剪
    Canvas 中提供了裁剪图片的方法，使用户可以从图片中选择想要显示的部分。
    1.1 clip()
    这种方法可以剪切出指定大小的图片，例如：
    ``` js
    ctx.beginPath();
    ctx.arc(100,75,50,0,Math.PI*2,true);
    ctx.clip();
    ctx.drawImage(img,0,0);
    ```
    以上代码将会剪切出一个半径为 50 的圆形图像，并将其设置为裁剪路径，然后绘制整张图片。
    2.旋转
    Canvas 中还提供了旋转图像的方法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。