<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
canvas{vertical-align:top;}
</style>
</head>
<body>
<!-- 直线 -->
<canvas id="canvas" width="100" height="100" style="border:1px solid red;"></canvas>
<!-- 三角形 -->
<canvas id="canvas2" width="100" height="100" style="border:1px solid red;"></canvas>
<!-- 一个画布绘制两个 三角形 -->
<canvas id="canvas3" width="300" height="300" style="border:1px solid yellow;"></canvas>
<!-- 绘制矩形 -->
<canvas id="canvas4" width="300" height="300" style="border:1px solid green;"></canvas>
<!-- 绘制圆 或圆弧 -->
<canvas id="canvas5" width="300" height="300" style="border:1px solid blue;"></canvas>
<!-- 坐标变换 -->
<canvas id="canvas6" width="300" height="300" style="border:1px solid grey;"></canvas>
<!-- 单个实验 缩放 与旋转 -->
<canvas id="canvas7" width="500" height="500" style="border:1px solid cyan;"></canvas>
<!-- drawImage方法 加背景图像 -->
<canvas id="canvas8" width="500" height="500" style="border:1px solid red;background:black;"></canvas>
<!-- 绘制文字 -->
<canvas id="canvas9" width="500" height="500" style="border:1px solid blue;"></canvas>
<script>
var canvas=document.getElementById("canvas");//获取canvas标签
var cxt=canvas.getContext('2d');//创建canvas对象 接口 钥匙
// canvas是基于状态的绘制
// 绘制一条直线---------------------------------------------------
cxt.moveTo(0,0);//起点
cxt.lineTo(100,100);//终点
// 设置线条样式
cxt.strokeStyle="red";//设置线条颜色
cxt.lineWidth="5";//设置线条粗细
cxt.stroke();//连接(绘画)命令 stroke：轻抚
// 绘制三角形-----------------------------------------------------
var canvas2=document.getElementById("canvas2");
var cxt2=canvas2.getContext('2d');
cxt2.moveTo(50,0);
cxt2.lineTo(0,100);
cxt2.lineTo(100,100);
cxt2.lineTo(50,0);
cxt2.strokeStyle="cyan";
cxt2.lineWidth=5;
cxt2.fillStyle="orange";
cxt2.fill();
cxt2.stroke();
// 在一个画布 画两个三角形--------------------------------------
var canvas3=document.getElementById("canvas3");
var cxt3=canvas3.getContext('2d');
// 第一个三角形
cxt3.beginPath();//开始创建路径
cxt3.moveTo(150,0);
cxt3.lineTo(150,80);
cxt3.lineTo(250,80);
// cxt3.lineTo(150,0); 可省略
cxt3.closePath();//关闭路径
cxt3.strokeStyle="yellow";//线条颜色
cxt3.lineWidth=2;//线条宽度
cxt3.fillStyle="green";//填充颜色
cxt3.stroke();//绘制命令
cxt3.fill();//填充命令
// 第二个三角形
cxt3.beginPath();//开始创建路径
cxt3.moveTo(100,100);
cxt3.lineTo(80,180);
cxt3.lineTo(200,200);
// cxt3.lineTo(100,100); 可省略
cxt3.closePath();//关闭路径
cxt3.strokeStyle="yellow";//线条颜色
cxt3.lineWidth=2;//线条宽度
cxt3.fillStyle="cyan";//填充颜色
cxt3.stroke();//绘制命令
cxt3.fill();//填充命令
// 多边形
cxt3.beginPath();//开始创建路径
cxt3.moveTo(250,200);
cxt3.lineTo(180,200);
cxt3.lineTo(150,250);
cxt3.lineTo(180,300);
cxt3.lineTo(250,300);
cxt3.lineTo(280,250);
cxt3.lineTo(250,200);
cxt3.closePath();//关闭路径
cxt3.strokeStyle="purple";//线条颜色
cxt3.lineWidth=2;//线条宽度
cxt3.fillStyle="orange";//填充颜色
cxt3.stroke();//绘制命令
cxt3.fill();//填充命令
// 绘制矩形--------------------------------------------------------
// cxt4.rect(x,y,width,height);
var canvas4=document.getElementById('canvas4');
var cxt4=canvas4.getContext('2d');
// 第一种方法
cxt4.rect(20,20,150,100);
cxt4.strokeStyle="black";
cxt4.lineWidth=5;
cxt4.fillStyle="orangered";
cxt4.stroke();
cxt4.fill();
// 第二种方法
cxt4.strokeRect(20,150,80,50);//直接绘制
// 第三种方法
cxt4.fillStyle="pink";
cxt4.fillRect(120,150,80,50);//填充加绘制 默认填充黑色
// 清空画布上的一块儿区域
cxt4.clearRect(130,160,30,30);
cxt4.clearRect(40,30,80,80);
// 绘制圆 或圆弧----------------------------------------------
// cxt.arc(x,y,radius,starAngle,endAngle,anticlockwise);
// x,y:圆心
// radius:半径
// starAngle,endAngle:开始角度，与终点角度;
// anticlockwise：顺时针(false),逆时针(true);anticlockwise:逆时针的
var canvas5=document.getElementById('canvas5');
var cxt5=canvas5.getContext('2d');
cxt5.beginPath();//开始画路径
cxt5.arc(50,50,50,0,Math.PI*2,false);
cxt5.closePath();//关闭路径
cxt5.fillStyle="red";
cxt5.fill();
cxt5.stroke();
// ------画弧-------------------------
cxt5.beginPath();
cxt5.arc(150,50,50,-Math.PI*0.5,Math.PI*0.5,false);
cxt5.closePath();
cxt5.fillStyle="pink";
cxt5.fill();
cxt5.stroke();
// 第二个弧
cxt5.beginPath();
cxt5.arc(50,150,50,Math.PI/4,-Math.PI*0.25,false);
cxt5.closePath();
cxt5.fillStyle="orangered";
cxt5.fill();
cxt5.stroke();
// 第三个弧
cxt5.beginPath();
cxt5.arc(150,150,50,Math.PI/4,-Math.PI*0.25,true);
cxt5.closePath();
cxt5.fillStyle="green";
cxt5.fill();
cxt5.stroke();
// 坐标变换
// cxt.translate(x,y)位移
// cxt.scale(x,y)缩放 不光图片宽高会缩放 起始坐标也会缩放
// cxt.rotate(angle)旋转 不光图形会旋转 坐标系也会旋转
// 解决使用多个位移后位置叠加的情况
// cxt.save();保存
// cxt.restore();恢复
var canvas6=document.getElementById('canvas6');
var cxt6=canvas6.getContext('2d');
cxt6.fillStyle="gray";
cxt6.save();
cxt6.translate(50,50);//位移
cxt6.fillRect(0,0,100,50);
cxt6.restore();
cxt6.save();
cxt6.fillStyle="green";
cxt6.translate(50,50);//相对于第一个矩形位移叠加了
cxt6.scale(2,1);
// 处理方法是用cxt.save();cxt.restore()将路径和位移包裹起来
// 旋转同样是这样处理
cxt6.fillRect(50,50,100,50);
cxt6.restore();
cxt6.fillStyle="red";
cxt6.save();
cxt6.translate(200,175);//让图片在（150,150）坐标
// cxt6.translate(50,50);
cxt6.rotate(30*Math.PI/180);
cxt6.fillRect(-50,-25,100,50);//让图片中心点与原点重合
cxt6.restore();
// ------------------实验 旋转 与 缩放----------------------
// 使canvas的旋转与缩放 以图片中心为基准 使效果与css3效果相同
var canvas7=document.getElementById('canvas7');
var cxt7=canvas7.getContext('2d');
var deg=0;
// cxt7.fillStyle='red';
// cxt7.save();
// cxt7.translate(200,150);//用位移确定 图片在画布中的位置
// // cxt7.rotate(180*Math.PI/180);
// // cxt7.scale(2,1);//此时用缩放也和css3一样了
// cxt7.fillRect(-100,-50,200,100);//先让图片的中心与原点重合1
// cxt7.restore();
function xz(){
// cxt7.clearRect(0,0,500,500);
deg=deg+2;
cxt7.clearRect(0,0,500,500)
cxt7.beginPath();
cxt7.save();
cxt7.translate(200,150);
cxt7.rotate(deg*Math.PI/180);
console.log(deg);
cxt7.strokeRect(-100,-50,200,100);
cxt7.restore();
cxt7.closePath();
if(deg>=360){
deg=0;
cxt7.clearRect(0,0,500,500)
}
}
setInterval(xz,40);
// drawImage方法 加背景图像-----------------------------
// drawImage(image,x,y)
// drawImage(image,x,y,w,h)
// 参数说明
// image：img,video元素，或者javascript中的image对象，用来装载图片文件
// x,y:绘制图像时，在画布中的起始x,y坐标
// w,h:绘制时，设置图像的宽度和高度
// 使用方法：
// var img = new Image();//创建Image对象
// img.src="img/html.jpg";//设置图像路径
// img.onload=function(){//图像加载完之后，将图片放在canvas里面
// context.drawImage(img,10,10);
// }
// clip()图像裁切方法
// 使用路径在画布上设置裁切区域
// 调用clip()方法设置裁切区域
// 例子
var canvas8=document.getElementById('canvas8');
var cxt8=canvas8.getContext('2d');
var img=new Image();//创建Image对象
img.src="img/Hydrangeas.jpg";//设置图像路径
img.onload=function(){
cxt8.drawImage(img,0,0,500,500)
}
// cxt8.save();加了这对标签 就切不了图了 无解
cxt8.strokeStyle="cyan";
cxt8.lineWidth="7";
cxt8.arc(250,250,200,0,2*Math.PI,false);
cxt8.stroke();
cxt8.clip();
// cxt8.restore();
// -----------绘制文字----------------------------
// font:设置文本样式
// textAlign:水平对齐方式 left,right,center
// textBaseline:垂直对齐方式 top,middle,bottom
// 填充文字 fillText(text,x,y)
// 绘制文字轮廓 strokeText(text,x,y)
// 参数说明：
// text:要绘制的文字
// x,y:文字起点x,y坐标
// 例子
var canvas9=document.getElementById('canvas9');
var cxt9=canvas9.getContext('2d');
cxt9.font="50px 微润雅黑";
cxt9.fillStyle="pink";
cxt9.strokeStyle="blue";
cxt9.textBaseline="top";//默认是底部对齐
cxt9.textAlign="left";//默认水平对齐方式为左对齐
cxt9.fillText('你好，欢迎光临!',100,100);
cxt9.strokeText('哈哈哈哈',200,200);
cxt9.strokeText('你好，欢迎光临!',105,105);
</script>
</body>
</html>
