canvas画布

canvas是一张画布标签只是容器,没有自己的行为,必须用脚本来绘制

canvas是一个基于JavaScript的绘图API

默认大小:300 * 150 IE9之前不支持该标签
cavas:提供了一个可以绘制的区域 具体的操作需要使用脚本(JS)
width和height 分别设置画布的范围(宽和高) 在body中设置

 

 

 

canvas所有的绘画步骤全部在js中完成

 

 

window.onload = function () {

 (1)获取画布对象
var canvas = document.getElementById('canvas');

(2)获取画笔(绘制环境)
 上下文
var context = canvas.getContext('2d');

 

 

JQ中 2d必须要小写

$(function(){
　　var contains('canvas').getContext('2d');
})

 

(3)设置画笔的样式
 设置图像填充颜色

context.fillStyle = 'pink';

4, 设置的是描边的样式
context.strokeStyle = 'red';

5, 设置线条的宽度
context.lineWidth = 10;

 

绘画线段

 

(1)开启路径
context.beginPath();

 2,绘制线条的起始点坐标
context.moveTo(100, 100);

3,设置线条的拐点  线段可以连接成三角形和多边形
context.lineTo(200, 200);
context.lineTo(300, 200);

 

4,封闭路径

a),手动封闭图形(连到原点)
 context.lineTo(100, 100);

b),闭合路径 如果图形还未绘制,会将图形的起始点和终点链接
context.closePath();

 

5,根据给定的坐标 将线条描边
context.stroke();

6, 填充
context.fill();

 

 

 

 

绘制矩形
x y width height

 超出画布范围的内容不会显示
1,填充矩形(实心)
context.fillRect(100, 100, 100, 100);

 2,镂空矩形(空心) 边框不占用内容大小
context.strokeRect( 220, 220, 120, 80);

context.beginPath();  开始
context.rect(200, 220, 100, 200);
context.closePath();
context.stroke();
context.fill();
 strokeRect() fillRect()

 绘制圆形

2PI = 360°
圆心xy  半径 开始的弧度 结束的弧度 是否是逆时针
true:表示逆时针
3点钟:0或者Math.PI*2 6点钟:Math.PI/2 9点钟:Math.PI 12点:Math.PI 3*/2

开启路径
context.beginPath();

 画圆
context.arc(100, 300, 50, 0, Math.PI/2, false);

描边
context.stroke();
 填充
context.fill();

关闭路径
context.closePath()

 

 

 

 

线性渐变 createLinearGradient(起点坐标, 终点坐标) 该方法会返回一个渐变对象(线性渐变路径, 颜色);
 (1)创建线性渐变对象 设置渐变路径坐标
 渐变路径与渐变颜色始终垂直

声明obj

var obj = ctx.createLinearGradient(50, 0, 250, 200);

设置线性渐变对象的渐变颜色

参数1, 参数2: 层次(0-1) 颜色
obj.addColorStop(0, 'red');
obj.addColorStop(0.4, 'orange');
 obj.addColorStop(0.8, 'pink');
obj.addColorStop(1, 'lightpink');

填充的参数等于上面声明的obj
 ctx.fillStyle = obj;

画一个矩形来盛放上面的渐变颜色,也可以是圆形多边形等
 ctx.fillRect(150,100, 100, 100);

 

 

径向渐变 

(第一个圆新坐标xy半径,第二个圆心坐标xy半径)

第二个圆心半径为0时就是代表到圆的最边

var obj = ctx.createRadialGradient(100, 100, 100, 100, 100, 0);
obj.addColorStop(0, 'red');
obj.addColorStop(0.4, 'orange');
obj.addColorStop(0.8, 'pink');
obj.addColorStop(1, 'lightpink');

ctx.fillStyle = obj;

ctx.arc(100, 100, 100, 0, 2*Math.PI);
ctx.fill();

 

 

转换canvas坐标  坐标上的内容有也会跟着转

此方法可以保存当前的绘图环境 坐标系的转换
context.save();

转换操作---本质都是在转换坐标系
 (1)scale() 缩放 sx(水平方向的缩放比例), sy(垂直方向的缩放比例)
 修改的是坐标系(严格意义上修改的是绘图环境 context)

x轴缩小一半,y轴放大两倍

context.scale(0.5,2);

 

(2)rotate() °
180°/180 = 1°   360°=2PI,先算出来一度再乘以20就是想要的度数
旋转了坐标系本身

context.rotate(20* Math.PI / 180);

 

(3)translate()

重新映射画布上的0,0位置,
context.translate(100, -50);

开启绘画路径
context.beginPath();

画一个矩形
context.fillRect(100, 100, 100, 100);

封锁路径
context.closePath();

 

// 恢复绘图环境

保存之前的绘图环境,重新绘画新的形状,圆点依然是0,0,不受其他已画好的图片的影响,重新画东西继续旋转缩放等操作
ctx.restore();

ctx.beginPath();
ctx.moveTo(100, 250);
ctx.lineTo(100, 350);
ctx.lineTo(200, 350);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.fillRect(100, 100, 100, 100);
ctx.closePath();

 

文本信息的相关设置
context.fillStyle = 'red';
context.strokeStyle = 'white';

 font属性可以设置context的字体大小 字体样式(安装过字体包)
ctx.font = '50px 黑体';

文本信息 绘制文本的位置
ctx.fillText('明天要下雪!', 100, 100);   实心
ctx.strokeText('明天要下雪!', 100, 100);  空心

 

 

绘制图片

 (1)创建图片对象
var img = new Image();
(2)设置图片源
img.src='yasuo.jpg';  图片地址

(3)图片的绘制必须等待图片加载完成之后
img.onload = function () {
3-9个参数
如果不给定大小, 图片默认按照原来的大小,超出画布的部分不再显示
参数:图片对象, 起始点坐标 ,图片的大小
context.drawImage(img, 50, 50, 100, 50);//常用的用法
console.log(11);  打印一下看有没有走这一步
在图片上选取范围进行绘制
参数:图片对象 选取的范围 位置 图片大小
context.drawImage(img, 0, 120, 220, 120, 50, 50, 200, 200);
}