1.canvas标签
html5新增了canvas标签
使用canvas
<canvas id=”myCanvas” width=”200” height=”100”></canvas>
在js中用getContext()方法获取画布的上下文，以获取允许进行绘制的2D环境
var c=document.getElementById(“myCanvas”);
var context=c.getContext(“2d”);
2.绘制矩形
canvas仅提供一种原生的图形绘制：矩形
三种方法绘制矩形
①fillRect(x,y,width,height):绘制一个填充的矩形
②strokeRect(x,y,width,height):绘制一个矩形的边框
③clearRect(x,y,width,height):清除指定矩形区域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="border: solid 1px #999;"></canvas>
<script>
draw();
function draw() {
var canvas=document.getElementById('canvas');
if(canvas.getContext){
var ctx=canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
</script>
</body>
</html>
3.路径
图形的基本元素是路径
用路径绘制图形的步骤
①创建路径起始点，调用beginPath()方法
②使用画图命令绘制路径
③把路径封闭
④生成路径后，可通过描边或填充来渲染图形
closePath()闭合路径
stroke()描边路径，不会自动闭合没有闭合的形状
fill()填充路径，调用该方法，所有没有闭合的形状都会自动闭合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="border: solid 1px #999;"></canvas>
<script>
draw();
function draw() {
var canvas=document.getElementById('canvas');
if(canvas.getContext){
var ctx=canvas.getContext('2d');
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
}
</script>
</body>
</html>
lineTo（）方法可以绘制直线
line(x,y)将绘制一条从当前位置到指定（x,y）位置的直线
arc()方法可以绘制弧或者圆
arc(x,y,r,sAngle,eAngle,counterclockwise)
sAngle:起始角，以弧度计。（弧的圆形的三点钟方向是0度）
eAngle:起始角，以弧度计。
counterclockwise：可选参数，定义绘图方向。false为顺时针，为默认值。true为逆时针。
4.绘制曲线
quadraticCurveTo(cpx,cpy,x,y)方法可以绘制二次方贝塞尔曲线
cpx,cpy表示控制点的x和y坐标
x,y表示结束点的坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="border: solid 1px #999;"></canvas>
<script>
draw();
function draw() {
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,200);
ctx.quadraticCurveTo(75,50,300,200);
ctx.strokeStyle="dark";
ctx.stroke();
ctx.globalCompositeOperation="source-over";
ctx.strokeStyle="#ff00ff";
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(0,200);
ctx.moveTo(75,50);
ctx.lineTo(300,200);
ctx.stroke();
}
</script>
</body>
</html>
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)方法可以绘制三次方贝塞尔曲线
cp1x,cp1y表示第一个控制点的x和y坐标
cp2x,cp2y表示第二个控制点的x和y坐标
x,y表示结束点的坐标
5.canvas定义样式和颜色
①fillStyle和strokeStyle分别设置图形的填充颜色和轮廓颜色
初始颜色都是黑色，#000000
②rgba(R,G,B,A)
R,G,B将红绿蓝指定为0-255的十进制整数
A把alpha(不透明)指定为0.0-1.0之间的一个浮点数值。0.0为完全透明。1.0为完全不透明。
例如，表示半透明的完全红色rgba(255,0,0,0.5)
③lineWidth属性可以设置线条的粗细，取值必须为正数，默认值为1.0
④lineCap属性用于设置线段端点的样式：butt(平头)、round(圆头)和square(方头)，默认值为butt
⑤lineJoin属性用于设置两条线段连接处的样式：round(圆角)、bevel(斜角)和miter(直角)，默认值为miter
⑥miterLimit属性用于设置两条线段连接处交点的绘制方式，如果lineJoin属性为round和bevel时，该属性无效
⑦虚线
⑧线性渐变
⑨径向渐变
⑩图案
⑪阴影
四个属性：shadowColor(阴影颜色)、shadowBlur(阴影的模糊级别)、shadowOffsetX(阴影在x轴的偏移距离)、shadowOffsetY(阴影在y轴的偏移距离)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="border: solid 1px #999;"></canvas>
<script>
draw();
function draw() {
var ctx=document.getElementById('canvas').getContext('2d');
//设置阴影
ctx.shadowBlur=4;
ctx.shadowOffsetX=4;
ctx.shadowOffsetY=4;
ctx.shadowColor="rgba(0,0,0,0.5)";
//绘制文本
ctx.font="60px Times New Roman";
ctx.fillStyle="Black";
ctx.fillText("Canvas API",5,80);
}
</script>
</body>
</html>
⑫填充规则
fill()方法可以接收两个值定义填充规则：“nonezero”和“evenodd”
function draw() {
var ctx=document.getElementById('canvas').getContext('2d');
ctx.beginPath();
ctx.arc(50,50,30,0,Math.PI*2,true);
ctx.arc(50,50,15,0,Math.PI*2,true);
ctx.fill("evenodd");
}
6.图形变形
Canvas状态存储在栈中，使用save()方法可以将当前状态送到栈中保存，使用restore()方法可以将上一个保存的状态从栈中弹出
示例
function draw() {
var ctx=document.getElementById('canvas').getContext('2d');
//绘制第一个矩形
ctx.fillStyle="yellow";
ctx.strokeStyle="blue";
ctx.fillRect(20,20,100,100);
ctx.strokeRect(20,20,100,100);
ctx.fill();
ctx.stroke();
//保存当前canvas状态
ctx.save();
//绘制第二个图形
ctx.fillStyle="green";
ctx.strokeStyle="red";
ctx.fillRect(140,20,100,100);
ctx.strokeRect(140,20,100,100);
ctx.fill();
ctx.stroke();
//恢复第一个矩形的状态
ctx.restore();
ctx.fillRect(20,140,50,50);
ctx.strokeRect(80,140,50,50);
}
清除画布：clearRect(x,y,width,height)
x,y是要清除的矩形的左上角的坐标，width和height是要清除的矩形的宽度和高度
移动坐标
translate(dx,dy)
dx,dy分别表示坐标原点沿水平和垂直两个方向的偏移量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="200" style="border: solid 2px black"></canvas>
<script type="text/javascript">
draw();
function draw() {
let ctx=document.getElementById("myCanvas").getContext('2d');
ctx.translate(0,80);
for(let i=1;i<10;i++){
ctx.save();
ctx.translate(60*i,0);
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
drawGrip(ctx);
ctx.restore();
}
}
//绘制伞形顶部半圆
function drawTop(ctx,fillStyle){
ctx.fillStyle=fillStyle;
ctx.beginPath();
ctx.arc(0,0,30,0,Math.PI,true);
ctx.closePath();
ctx.fill();
}
//绘制伞形底部手柄
function drawGrip(ctx){
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(-1.5,0,1.5,40);
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
</script>
</body>
</html>
旋转坐标
rotate(angle)
旋转角度angle以顺时针为正方向，以弧度为单位。
7.绘制文本
填充文字
fillText(text,x,y,maxWidth)方法可在画布上绘制填色文本，默认是黑色
x,y是开始绘制文本是坐标位置
maxWidth:可选。允许的最大文本宽度
轮廓文字
strokeText(text,x,y,maxWidth)方法可在画布上绘制描边文本，默认是黑色
文本样式
8.测量宽度
measureText()方法可以测量当前绘制文字的宽度，要用到该对象的width属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>测量文字宽度</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200" style="border: solid 2px black"></canvas>
<script type="text/javascript">
draw();
function draw() {
let ctx=document.getElementById("myCanvas").getContext('2d');
ctx.font="bold 20px 楷体";
ctx.fillStyle="Blue";
let txt1="HTML5+CSS3";
ctx.fillText(txt1,10,40);
let txt2="以上字符串的宽度为：";
let mtxt1=ctx.measureText(txt1);
let mtxt2=ctx.measureText(txt2);
ctx.font="bold 15px 宋体";
ctx.fillStyle="Red";
ctx.fillText(txt2,10,80);
ctx.fillText(mtxt1.width.toString(),mtxt2.width,80);
}
</script>
</body>
</html>
