html5canvas绘图技术的应用(html5canvas用途)
HTML5中使用canvas绘制复杂图形
接下来，我们来看一下除了arc方法以外，其他使用路径绘制 图形 时会使用的方法。首先从绘制直线开始。
绘制直线一般会用到2个方法，分别是moveTo方法，lineTo方法
1. moveTo方法
moveTo方法的作用是将光标移动到指定的位置，绘制直线的时候以这个坐标为起点。使用如下：moveTo（x,y）;
该方法有2个参数，x指指定左标的横坐标，y指指定坐标的纵坐标。
2. lineTo方法
lineTo方法是指在moveTo方法指定直线的起点和指定直线终点之间绘制一条直线。使用如下：
lineTo（x,y）;
该方法的2个参数和moveTo方法的参数意义一样。使用该方法绘制完直线后，光标会自动移到lineTo指定的直线的终点。
因此，在创建路径时，需要使用moveTo方法将光标移动到指定的直线起点，使用lineTo方法在直线起点和直线终点之间创建路径，然后将光标移动到指定直线终点。
运行结果：
如何运用HTML5画图
工具/材料
Sublime Text
01
首先要准备一个画布，如下图所示，在HTML5中我们用canvas来表示画布
02
然后我们在script脚本中获取画布对象，如下图所示，运用JS的getElementById方法即可
03
接下来我们通过画布对象的getContext方法来获取上下文2d对象，如下图所示，我们要操作的内容都在里面
04
然后我们给2d上下文填充背景色，如下图所示，运用上下文的fillStyle属性即可
05
接下来，运用上下文的fillRect方法来画一个矩形，注意里面的四个值就是四个坐标，如下图所示
06
最后我们运行界面程序，你会看到如下图所示的红色矩形样例，你可要和上面的坐标对应一下
07
当然2d上下文中还可以画其他的图形，如下图所示的圆形，大家根据自己的需要应用即可
html5 canvas是做什么的
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
html5 canvas绘图有什么用
W3school上面是这么介绍的：
HTML5 canvas 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，canvas 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
更多信息
如何使用HTML5的Canvas图形元素绘制图形
1、canvas绘制矩形
!DOCTYPE html
html
head lang="en"
meta charset="UTF-8"
titlecanvas绘制矩形/title
script type="text/javascript" src="canvas2.js"/script
style type="text/css"
body {
margin: 0;
padding: 0;
}
/style
/head
body onload="draw('canvas')"
canvas id="canvas" width="400" height="300"/canvas
/body
/html
js:
/**
* Created by winson on 2016/9/11.
*/
function draw(id) {
var canvas = document.getElementById(id);//用getElementById获取到canvas对象
var context = canvas.getContext('2d');//取得上下文
context.fillStyle = "green";//绘制背景的颜色
context.strokeStyle = "#fff";//绘制边框的颜色
context.lineWidth = 5; //设置画笔宽度
context.fillRect(0, 0, 400, 300);//绘制
context.strokeRect(50, 50, 180, 120);
}