一、绘制直线
1.准备"画布"，画布默认大小是300px*150px
<canvas width="600" height="400" ></canvas>
<!--注意:对画布设置宽高只能在行内设置，不在css中设置-->
2.获取元素并绘制一条简单的直线
<script>
/*1.获取元素*/
var myCanvas = $('canvas')[0];
/*2.获取上下文 绘制工具箱 */
/*是否有3d 暂时没有*/
var ctx = myCanvas.getContext('2d'); /*web gl 绘制3d效果的网页技术*/
/*3.移动画笔*/
ctx.moveTo(100,100);
/*4.绘制直线 (轨迹，绘制路径)*/
ctx.lineTo(500,100);
/*5.描边*/
ctx.stroke();
</script>
3.和线相关的属性和方法
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
ctx.beginPath();/*开启新路径*/
ctx.closePath();//闭合路径
ctx.stroke();//描边
ctx.fill();//填充
ctx.strokeStyle = 'blue';//设置描边的颜色
ctx.fillStyle = 'red';//设置填充的颜色
ctx.lineWidth = 10;//设置线的宽度
ctx.lineCap = 'square';//设置线两边的样式，有butt(默认)、round、square这几个属性
ctx.lineJoin = 'bevel';//设置相交线的拐点样式，不常用
二、绘制虚线和矩形
1.绘制虚线
ctx.moveTo(100,100.5);
ctx.lineTo(300,100.5);
//要绘制虚线先画一条实线，然后擦掉部分实线即是虚线
ctx.setLineDash([20]);//这个数组是用来描述实线和虚线的排列方式的
ctx.getLineDash();//获取虚线的排列方式
ctx.lineDashOffset = 30;//设置虚线的偏移（前后移动）
ctx.stroke();//描边
2.绘制矩形
ctx.rect(100,100,100,100);//四个参数分别是x,y,w,h
//用rect方法是绘制矩形路径，不是独立路径，需要描边或填充才能看到矩形
ctx.stroke();
ctx.fill();
ctx.strokeRect(100,100,200,100);
ctx.fillRect(100,100,200,100);
//用这种方法是绘制矩形，有独立路径，不需要描边或填充
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);//清除矩形内容
3.绘制颜色渐变的矩形
var linearGradient = ctx.createLinearGradient(0,0,0,600);
/*创建一个渐变的方案*/
/*渐变是由长度的*/
/*x0y0起始点,x1y1结束点 确定长度和方向*/
/*通过两个点的座标可以控制 渐变方向*/
linearGradient.addColorStop(0,'pink');//设置渐变的颜色
linearGradient.addColorStop(1,'blue');//设置渐变的颜色
ctx.fillStyle = linearGradient;//设置填充矩形的方式为渐变
ctx.fillRect(0,0,600,400);//填充矩形
三、绘制曲线和文字
1.绘制曲线
/*1.体验曲线的绘制*/
/*2.线是由点构成的*/
/*3.曲线都是由数学公式得来*/
for(var i = 1 ; i < 600 ; i ++){
var x = i;
var y = 50*Math.sin(x) + 100;
ctx.lineTo(x,y);
}
ctx.stroke();
2.绘制圆弧
/*绘制圆弧*/
/*确定起始绘制的位置和结束绘制的位置，确定弧的长度和位置，startAngle，endAngle，弧度*/
/*取得绘制的方向:direction 默认是顺时针(false)，逆时针(true) */
/*在中心位置画一个半径150px的圆弧左下角*/
var w = ctx.canvas.width;
var h = ctx.canvas.height;
ctx.arc(w/2,h/2,150,Math.PI/2,Math.PI,true);
//参数分别为x,y,r,起点,终点,绘制方向
//对于一个圆来说，最高点是3π/2，最低点是π/2，与圆心在同一高度的右边是0
ctx.stroke();
3.绘制扇形
/*在中心位置画一个半径150px的圆弧右上角 扇形 边 填充 */
var w = ctx.canvas.width;
var h = ctx.canvas.height;
/*把起点放到圆心位置*/
ctx.moveTo(w/2,h/2);
ctx.arc(w/2,h/2,150,0,-Math.PI/2,true);
ctx.fill();
//注意：必须先把画笔移到圆心位置，填充出来的才是一个扇形
4.绘制文字
/*注意：起点位置在文字的左下角*/
ctx.font = '40px Microsoft YaHei';//设置文字的大小和字体风格
ctx.textAlign = 'center'; /*左右对齐方式:(center left right start end) 基准是起始座标*/
ctx.textBaseline = 'middle';/*垂直对齐的方式:baseline(top,bottom,middle) 基准是起始座标*/
ctx.direction = 'rtl';//rtls是right to left;ltr是left to right
ctx.strokeText(str,x0,y0);//描边
ctx.fillText(str,x0,y0);//填充
ctx.measureText(str).width;/*获取文本的宽度*/
四、绘制图片和座标转换
1.绘制图片
一共有三种方法：
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
/*创建对象*/
var image = new Image();
image.onload = function () {
/*3参数*/
/*图片对象,x,y*/
ctx.drawImage(image,100,100);
/*5个参数*/
/*图片对象*/
/*绘制在画布上的座标 x y*/
/*是图片的大小,不是裁剪,是缩放*/
ctx.drawImage(image,100,100,100,100);
/*9个参数*/
/*图片对象*/
/*图片上定位的座标 x y */
/*在图片上截取多大的区域 w h*/
/*绘制在画布上的座标 x y*/
/*是图片的大小,不是裁剪,是缩放*/
ctx.drawImage(image,400,400,400,400,200,200,100,100);
};
/*设置图片路径*/
image.src = 'image/02.jpg';
</script>
2.座标转换
ctx.translate(100,100);//把canvas座标的x,y轴都向正方向移动100px
ctx.scale(0.5,1);//把canvas座标的x座标缩小一半，y轴不变
ctx.rotate(Math.PI/6);//把canvas座标旋转一定的角度