canvas H5新增标签
特点：
1.集成了 一组可以用来进行 图形绘制 图像处理 动画特效 等等的 API接口方法
通常使用canvas 标签对象的方法，可以在 canvas画布区域 绘制任意的图形和图像
2.canvas 通常默认 宽高 300*150
也可以通过 width height 来控制画布大小
3.canvas 跟其他元素一样 都可以用 css 来 设置样式
他虽然是一个行标签 但是 其自带 width height 属性 所以 也可以设置宽高
但是 如果通过属性来设置画布大小 有可能会导致 画布上图形被拉伸
所以通常使用canvas DOM 对象的 width height 属性进行设置
4.canvas 有兼容性问题 只兼容IE9 以上版本
所以 通常在使用 canvas的 时候 会在标签内部 加上兼容性提示
1.获取到canvas 节点
<body>
<canvas id="canvas">该浏览器版本太低，请使IE9以上版本</canvas>
</body>
<script>
//对 canvas 进行具体操作 最好是获取到canvasDom
获取到canvas 节点
var canvas = document.getElementById('canvas');
</script>
2.清空画布:
cxt.clearRect(0,0,c.width,c.height);
3.在对canvas进行操作之前 需要先 获取到画布的绘制环境：
.getContext(type,contextAttributes);
.getContext(type,contextAttributes);
type:四种参数
2d： 创建一个 CanvasRenderingContext2D 对象 来进行 2D 的渲染
alpha:true/false
表示 canvas 是否包含一个 alpha 通道
如果值为false 则浏览器知道 背景永远不透明 能够加速绘制
storage：声明使用 storage 类型 默认为 “persistent”
webgl: 创建一个 WubGLRenderingContext 对象 来进行 3D 的渲染
webgl2: 创建一个 WubGL2RenderingContext 对象 来进行 3D 的渲染 但是
其只在 实现了 webgl 3 的浏览器上可以使用
bitmaprenderer：创建一个 ImageBitmapRengderingContext 对象 来 渲染
contextAttributes：可传递多个参数集合用来创建渲染上下文
注意：
type 类型不同 参数值不同
2d 的时候 基本不用 主要用来绘制3D 的时候 设置一些东西
var ctx = canvas.getContext('2d');
1.像素操作
1.设置宽高：
canvas.width = 500;
canvas.height = 500;
2.向画布上绘制图像、画布或视频
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
2.路径：
1.开始绘制图形
ctx.beginPath();
2.设置笔的移动轨迹
// 线的起点
ctx.moveTo(50,50);
//线的终点
ctx.lineTo(100,100);
3.结束绘制
ctx.closePath();
4.显示画笔移动轨迹
ctx.stroke();
3.设置笔的属性和颜色：
1.设置笔的颜色
ctx.strokeStyle = 'black';
2.设置笔的粗细
ctx.lineWidth = '5';
3.设置填充颜色
ctx.fillStyle = 'yellow';
4.开始填充颜色
ctx.fill();
5.设置路径颜色
ctx.strokeStyle ='red';
4.设置线帽：
1.圆形 线帽
ctx.lineCap = 'round';
2.距形 线帽
ctx.lineCap = 'square';
5.绘制圆弧：
ctx.arc(x,y,r,startArc,endArc,bool)；
参数：
x,y 圆心 x y 坐标
r 圆的半径
startArc 起点弧度值
endArc 终点弧度值
bool true/false
true 逆时针
false 顺时针
弧度 1度 = 2 *Math.PI / 360
Math.pI / 180
var deg = Math.PI / 180;
6.贝塞尔曲线:
1.二次贝塞尔曲线
ctx.quadraticCurveTo(cpx,cpy,endx,endy);
cpx,cpy 控制 点的的 x y 坐标
endx,endy 结束点的 x y 坐标
2.三次贝塞尔曲线
ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
cp1x,cp1y 第一个控制 点的的 x y 坐标
cp2x,cp2y 第二个控制 点的的 x y 坐标
x,y 结束点的 x y 坐标
7.矩形
1.绘制矩形块
ctx.fillRect(x,y,width,height);
2.绘制矩形框
ctx.strokeRect(x,y,width,height);
8.渐变
1. 线性渐变
ctx.createLinearGradient(x1,y1,x2,y2);
x1,y1 渐变 起始点 坐标
x2,y2 渐变 结束点 坐标
2. 径向渐变
ctx.createRadialGradient(x,y,r,x1,y2,r1);
x ,y 内圆中心 r 内圆半径
x1,y1 外圆中心 r1外圆半径
举例：
1.五角星：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五角星</title>
<script src="../../b7/jquery-1.9.1.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
// 获取到canvas 节点
var canvas = document.getElementById('canvas');
// 在对canvas进行操作之前 需要先 获取到画布的绘制环境
var ctx = canvas.getContext('2d');
// 设置宽高
canvas.width = 500;
canvas.height = 500;
// 封装 渲染 矩形的方法
function Rect(options) {
// 起始坐标
this.startx = options.startx;
this.starty = options.starty;
// 宽高
this.w = options.w;
this.h = options.h;
// 边框色
this.strokeStyle = options.strokeStyle;
// 填充色
this.fillStyle = options.fillStyle || 'white';
// 粗细
this.lineWidth = options.lineWidth;
}
// 渲染方法
Rect.prototype.draw = function (ctx) {
// 画笔开始移动
ctx.beginPath();
// 线的起点
ctx.moveTo(this.startx+70, this.starty+30);
//线的终点
ctx.lineTo(this.startx +30, this.starty+140);
ctx.lineTo(this.startx + 125 , this.starty+70);
ctx.lineTo(this.startx +10, this.starty+70);
ctx.lineTo(this.startx + 100, this.starty+140);
// 画笔结束移动
ctx.closePath();
// 设置边框 设置画笔移动轨迹
ctx.strokeStyle = this.strokeStyle;
// 设置 粗细
ctx.lineWidth = this.lineWidth;
// 显示画笔移动轨迹
ctx.stroke();
// 设置 填充色
ctx.fillStyle = this.fillStyle;
// 开始填充颜色
ctx.fill();
}
// 实例化一个 矩形
var r1 = new Rect({
startx: 100,
starty: 100,
w: 80,
h: 80,
//设置颜色
strokeStyle: 'pink',
//粗细
lineWidth: 5,
//设置填充颜色
// fillStyle: 'green',
});
// 绘制自己
r1.draw(ctx);
</script>
</html>
2.三角形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角形</title>
<script src="../../b7/jquery-1.9.1.js"></script>
<style>
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
// 获取到canvas 节点
var canvas = document.getElementById('canvas');
// 在对canvas进行操作之前 需要先 获取到画布的绘制环境
var ctx = canvas.getContext('2d');
// 设置宽高
canvas.width = 500;
canvas.height = 500;
// 封装 渲染 矩形的方法
function Rect(options) {
// 起始坐标
this.startx = options.startx;
this.starty = options.starty;
// 宽高
this.w = options.w;
this.h = options.h;
// 边框色
this.strokeStyle = options.strokeStyle;
// 填充色
this.fillStyle = options.fillStyle || 'white';
// 粗细
this.lineWidth = options.lineWidth;
}
// 渲染方法
Rect.prototype.draw = function (ctx) {
// 画笔开始移动
ctx.beginPath();
// 线的起点
ctx.moveTo(this.startx, this.starty);
//线的终点
ctx.lineTo(this.startx + this.w / 2, this.starty - this.h);
ctx.lineTo(this.startx + this.w, this.starty);
// 画笔结束移动
ctx.closePath();
// 设置边框 设置画笔移动轨迹
ctx.strokeStyle = this.strokeStyle;
// 设置 粗细
ctx.lineWidth = this.lineWidth;
// 显示画笔移动轨迹
ctx.stroke();
// 设置 填充色
ctx.fillStyle = this.fillStyle;
// 开始填充颜色
ctx.fill();
}
// 实例化一个 矩形
var r1 = new Rect({
startx: 100,
starty: 100,
w: 80,
h: 80,
//设置颜色
strokeStyle: '#000',
//粗细
lineWidth: 5,
//设置填充颜色
// fillStyle: 'green',
});
// 绘制自己
r1.draw(ctx);
</script>
</html>
3.六边形
!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>六边形</title>
<link rel="stylesheet" href="">
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
var cvs=document.getElementById('canvas');
var ctx=cvs.getContext('2d');
// 构造函数
function Rect(options) {
// 起始坐标
this.startX=options.startX;
this.startY=options.startY;
// 宽高
this.width=options.width;
this.height=options.height;
this.strokeStyle=options.strokeStyle;
this.fillStyle=options.fillStyle;
}
//绘制函数
Rect.prototype.draw=function(ctx) {
// 画笔开始移动
ctx.beginPath();
// 起始坐标 左上角坐标
ctx.moveTo(this.startX,this.startY);
// 画笔 左下角坐标
// 画笔右移 右下角坐标
// 顶角
ctx.lineTo(this.startX+this.width/2,this.startY-this.height/2);
// 右顶角
ctx.lineTo(this.startX+this.width,this.startY);
// 左下角坐标
// 右下角坐标
ctx.lineTo(this.startX+this.width-8,this.startY+this.height/2);
ctx.lineTo(this.startX+this.width/2-30,this.startY+this.height/2);
// 画笔上移 右上角下标
// 画笔结束移动
ctx.closePath();
ctx.strokeStyle=this.strokeStyle;
ctx.fillStyle=this.fillStyle;
ctx.fill();
ctx.stroke();
}
var jx=new Rect({
startX: 200,
startY:50,
width: 80,
height: 80,
strokeStyle: '#000',
// fillStyle: 'pink'
});
jx.draw(ctx);
</script>
</html>
4.六芒星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>六芒星</title>
<script src="../../b7/jquery-1.9.1.js"></script>
<style>
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
// 获取到canvas 节点
var canvas = document.getElementById('canvas');
// 在对canvas进行操作之前 需要先 获取到画布的绘制环境
var ctx = canvas.getContext('2d');
// 设置宽高
canvas.width = 500;
canvas.height = 500;
// 封装 渲染 矩形的方法
function Rect(options) {
// 起始坐标
this.startx = options.startx;
this.starty = options.starty;
// 宽高
this.w = options.w;
this.h = options.h;
// 边框色
this.strokeStyle = options.strokeStyle;
// 填充色
this.fillStyle = options.fillStyle || 'white';
// 粗细
this.lineWidth = options.lineWidth;
}
// 渲染方法
Rect.prototype.draw = function (ctx) {
// 画笔开始移动
ctx.beginPath();
// 渲染起始位置
ctx.moveTo(this.startx-80, this.starty+60);
// 线的终点
ctx.lineTo(this.startx+this.w/2-80, this.starty-this.h+60);
ctx.lineTo(this.startx+this.w-80, this.starty+60);
// 画笔结束移动
ctx.closePath();
// 设置边框 设置画笔移动轨迹
ctx.strokeStyle = this.strokeStyle;
// 设置 粗细
ctx.lineWidth = this.lineWidth;
// 显示画笔移动轨迹
ctx.stroke();
// 设置 填充色
// ctx.fillStyle = this.fillStyle;
// ctx.fill();
ctx.beginPath();
// 渲染起始位置
ctx.moveTo(this.startx, this.starty);
// 线的终点
ctx.lineTo(this.startx-this.w/2, this.starty+this.h);
ctx.lineTo(this.startx-this.w, this.starty);
// 画笔结束移动
ctx.closePath();
// 设置边框 设置画笔移动轨迹
ctx.strokeStyle = this.strokeStyle;
ctx.stroke();
}
// 实例化一个 矩形
var r1 = new Rect({
startx: 200,
starty: 50,
w: 80,
h: 80,
strokeStyle: 'black',
//粗细
lineWidth: 3,
// fillStyle: 'green',
});
// 绘制自己
r1.draw(ctx);
</script>
</html>
