基本介绍
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
创建画布
在html中创建一个画布,并在js中获取到canvas元素后创建对象。
// html
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
// js
var c=document.getElementById("myCanvas");
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx=c.getContext("2d");
坐标
Canvas为一个矩形，左上角坐标为(0,0),右下角坐标为(width, height),也就是画布的宽高
笔触设置
-
笔触的颜色、渐变或模式。
// 默认值为 "#000000"
ctx.strokeStyle="#FF0000";
// 渐变设置
1. 创建线性渐变的起点和终点（确认渐变方向）和添加颜色
var gradient=ctx.createLinearGradient(x0,y0,x1,y1);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
2.把渐变赋值给笔触 或者使用渐变填充
ctx.strokeStyle = gradient
//
ctx.fillStyle= gradient
-
线条颜色
| 属性 | 描述 |
|---|---|
| lineCap | 设置或返回线条的结束端点样式。 |
| lineJoin | 设置或返回两条线相交时，所创建的拐角类型。 |
| lineWidth | 设置或返回当前的线条宽度。 |
| miterLimit | 设置或返回最大斜接长度。 |
画路径(线)
画一条线要用到三个方法
- moveTo(x0,y0) 定义线的起点，路径移动到画布中的指定点，不创建线条。
- lineTo(x1,y1) 定义线的终点
- stroke() 绘制已定义的路径
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
画矩形
画一个矩形用到两个方法或者是一个
-
rect(x,y,width,height) stroke() (无填充的矩形)
-
strokeRect(x,y,width,height) (无填充的矩形)
-
fillRect(x,y,width,height) (默认黑色填充的矩形)
x,y为矩形的左上角位置，width,htight为矩形的高宽
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 1.
ctx.rect(0,0,100,100);
ctx.stroke()
//2.
ctx.strokeRect(120,0,100,100);
// 3.
ctx.fillRect(240,0,100,100);
画圆
画一个圆（弧）用到两个方法
- carc(x,y,r,sAngle,eAngle,counterclockwise) x,y 为圆心在画布的位置， r 为半径 ，sAngle,eAngle 分别为开始的角度和结束角度，counterclockwise 画圆（弧）的方向 true 为顺时针， false 为逆时针
- stroke() 绘制已定义的路径
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
总结
绘制一个有描边无填充的图像时，会使用stroke()方法。
绘制一个无描边填充的图像，使用fill()方法
绘制一个有描边有填充的图像，以上的两个方法都需要使用。
