通过调用HTML5的画布API绘制图形的快速入门指南

1。canvas元素
下面的HTML代码定义了一个画布元素。

xml代码将内容复制到剪贴板。
帆布快速启动

通过以下Javaｓｃｒｉｐｔ语句访问画布元素：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
写/写
在window.onload =函数（）{
VaR的画布document.getelementbyid（MainCanvas ）；
VaR上下文= canvas.getcontext（2D）；
}；
jQuery编写
$（文档）Ready（函数（）{）
VaR的画布=美元（# MainCanvas ）；
VaR上下文= canvas.get（0）。GetContext（2D）；
}）；
然后，您可以调用上下文方法调用API

2。基本的API
2.1坐标系统
画布2D渲染上下文使用平面直角坐标系统，左上角为原点（0,0），和1个单位的坐标系对应的1像素的屏幕，具体如下：
2.2绘制基本图形
2.2.1矩形

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
绘制一个填充矩形
Context.fillRect (x, y, width, height)
绘制矩形/帧
context.strokerect（x，y，宽度，高度）
删除一个矩形区域
context.clearrect（x，y，宽度，高度）

2.2.2线
有画线、画图形之间的一些差异，和线实际上是被称为路径，画一个简单的路径，首先我们必须调用调用方法，然后调用起始点坐标来设置路径，然后调用LineTo设置线段的终点坐标（多设置），然后电话closepath完成路径图。最后，中风是用来绘制轮廓（或叫填充路径）。下面是一些例子：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
例
（上下文。调用）； / /路径
context.moveto（40, 40）； / /移动点（40,40）
context.lineto（300, 40）； / /线点（300,30）
context.lineto（40, 300）； / /线点（40300）
（上下文。closepath）； / /最后的路径
（上下文.笔划）；
/ /或充满context.fill（）；

2.2.3圆
帆布其实没有做一个循环圈的方法，并能绘制一个圆弧拟合圆。由于电弧是一个路径，圆弧的API调用和closepath之间应包括。
2.3风格
2.3.1修改线条颜色

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
VaR的颜色；
RGB的指定值
颜色=RGB（255, 0, 0）；
指定的值（RGBA /α作为最后一个参数值，0 ~值1）
颜色=RGBA（255, 0, 0，1）；
指定的16进制代码
颜色=# FF0000；
使用指定的单词
颜色红色；
设置填充颜色
context.fillstyle =颜色；
设置边框颜色
context.strokestyle =颜色；

2.3.2修改线宽

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
指定的值宽度
var值= 3；
设置边框颜色
context.linewidth =价值；

2.4绘制文本

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
指定字体样式
context.font =斜体30px黑体；
/ /（40,40）绘制的文本
context.filltext（你好世界！

2.5绘制图像
在绘制图像之前，需要定义图像并加载它。

CSS代码将内容复制到剪贴板。
VaR img =新的图像（）；
img.src =myimage。png；
img.onload =函数（）{
加载映像实现
}；

以下是DrawImage API的解释：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
在（x，y）中绘制图像图像。
context.drawimage（图像，x，y）
在（x，y）图像宽度*高度图像渲染
context.drawimage（图像，X，Y，宽度，高度）
/ /图像（SX，SY）图像截取swidth * sheight（dx，dy）、图像的绘制dwidth * dheight
context.drawimage（图像、SX，SY，swidth，sheight，dx，dy，dwidth，dheight）

三.先进的功能
3.1使画布填充浏览器窗口
最简单的方法是将画布元素的宽度和高度设置为浏览器窗口的宽度和高度，并用CSS消除白间距。
CSS代码：

CSS代码将内容复制到剪贴板。
{ *
保证金：0；
填充：0；
}

HTML，体{
身高：100%；
宽度：100%；
}

帆布{
显示块；
}

Javaｓｃｒｉｐｔ代码：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
功能resizecanvas（）{
画布是通过jQuery获得的
canvas.attr（宽
canvas.attr（高
context.fillrect（0, 0，canvas.width（），canvas.height（））；
}
$（窗口）大小（resizecanvas）；
resizecanvas（）；

3.2绘制状态
在画布上绘制图案，是指描述一个2D渲染上下文外观属性的设置包括：变换矩阵，裁剪区域，globalAlpha、globalcompositeoperation，strokeStyle，填充颜色，线宽，线帽，线连接，miterlimit，shadowoffsetx，shadowoffsety，shadowblur，shadowcolor、字体、TextAlign和textbaseline。
改变全球画布的状况时，我们通常会保存当前状态：mdash；mdash；调用Save方法推动国家进入绘画状态栈；完成操作后，我们称之为恢复方法恢复绘制状态。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
例
context.save（）；
context.globalalpha = 0.5；
context.fillrect（0, 0, 200，100）；
context.restore（）；

3.3变形
3.3.1翻译
将2D渲染上下文的原点从一个位置移动到另一个位置。注意，全局绘图的位置是坐标的原点，API如下所示：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
移动坐标（x，y）的来源
context.translate（x，y）

3.3.2缩放

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
横向和纵向尺寸全局缩放到x，y时间（即，乘以原始值中的因数）
context.scale（x，y）

3.3.3旋转

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
围绕原点旋转半径弧度/帆布
context.rotate（半径）