HTML画布——canvas

HTML5画布——canvas

HTML5元素用于图形的绘制，通过脚本 (通常是<span style="font-family:consolas">JavaScript</span>)来完成.
标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像

1、如何创建一个画布？

<canvas id= "canvas_id" width="400px" height="400px">content</canvas>

content中的内容是当浏览器不支持canvas标签时显示的内容

<canvas id= "canvas_id" width="400px" height="400px" style="border:1px solid black">content</canvas>

定义一个有边框的画布，border属性是边框的宽度和边框的颜色

<BR>

2、用JavaScript在画布上绘制图像：

首先找到<canvas>元素：

var c=document.getElementById("myCanvas");

再创建一个context对象：

var ctx = c.getContext("2d")

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

开始绘制图像（例如绘制填充一个矩形）：

ctx.fillStyle = #66ccff;
ctx.fillRect(x,y,width,height)

canvas画布是一个二维网格。
canvas画布的左上角坐标为 (0,0)

矩形的x，y分别表示矩形左上角的坐标，width和height参数表示矩形的宽度和高度

3、canvas路径的绘制：

（1）直线路径的绘制：

同绘制矩形图形一样，首先找到canvas元素后创建一个context对象

接着线条的开始坐标：

moveTo(x,y)

再定义线条的结束坐标：

lineTo(x,y)

最后stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径

ctx.stroke()

<span style="font-family:consolas">strokeStyle</span>属性可以设定路径的颜色：

ctx.strokeStyle = "red"

（2）绘制圆形：

绘制圆形，我们使用如下的方法：

arc(x,y,r,start,stop)

例如，下边绘制一个圆形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

x,y分别表示x和y轴上的坐标
r：半径长度
start：起始角度，圆心平行的右端为0度
stop：结束角度：Math.PI表示180°，画圆的方向是顺时针

（3）绘制文本：

• font属性定义绘制文本的字体,例如设置consolas的30像素字体：

ctx.font = "30px consolas"

• 绘制实心文本：

fillText(content,x,y)

• 绘制空心的文本：

strokeText(content,x,y)

4、canvas的渐变效果：

（1）创建一个渐变：

创建线条渐变： x,y表示渐变开始点的x，y坐标，x1,x2点表示结束点x，y坐标

createLinearGradient(x,y,x1,y1)

创建一个径向/圆渐变

creatRadialGradient(x,y,r,x1,y1,r1)

(2)使用渐变对象：

使用渐变对象，必须使用两种或两种以上的颜色停止颜色

addColorStop()方法指定颜色停止，参数为0~1

（3）最后开始绘制形状路径（填充渐变）

设置fillStyle或strokeStyle的值为渐变，然后绘制图像：

ctx.fillStyle=grd grd为createLinearGradient创建的对象

ctx.fillRect(x,y,w,h)