canvas 绘制线条
//获取 canvas 上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制
//绘制第一条直线
//ctx.beginPath();
//起点
ctx.moveTo(100, 100);
//终点
ctx.lineTo(300, 100);
//注意点:之前的操作,都是描述路径,不没有进行绘制
//线宽
ctx.lineWidth = 10;
//颜色
ctx.strokeStyle = 'red';
//描边
ctx.stroke();
//3.画竖线
//开启路径
//作用:beginPath() 将当前路径和上一条路径隔离, 方便进行样式的设置和管理
ctx.beginPath();
//起点
ctx.moveTo(200, 50);
//终点
ctx.lineTo(200, 350);
//画斜线
ctx.lineTo(350, 450);
//闭合路径
//作用:将路径线头和线尾连接,闭合
ctx.closePath();
ctx.lineWidth = 4;
ctx.strokeStyle = 'green';
//描边
ctx.stroke();
绘制表格背景
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制背景
//常量
var margin = 10;//间距
//行数
var row = canvas.height / margin;
//列数
var col = canvas.width / margin;
//遍历
//横线
for(var i = 0;i
绘制表格
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制背景
//常量
var margin = 10;//间距
//行数
var row = canvas.height / margin;
//列数
var col = canvas.width / margin;
//遍历
//横线
for(var i = 0;i
绘制矩形
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制矩形一
/* ctx.rect(100, 100, 200, 100);
//线宽
ctx.lineWidth = 4;
//颜色
ctx.strokeStyle = 'red';
//描边
ctx.stroke();
//填充色
ctx.fillStyle = 'blue';
//填充
ctx.fill();*/
//3.绘制矩形二
//快速创建无填充矩形
//作用: 快速的描述路径, 之后立即绘制
//注意:一定要在绘制之前设置样式和线宽
/* ctx.strokeStyle = 'red';
ctx.lineWidth = 4;
ctx.strokeRect(200, 200, 200, 100);*/
//快速创建填充矩形
ctx.fillStyle = 'blue';
ctx.fillRect(200, 200, 200, 100);
绘制画板
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.监听鼠标点击
canvas.onmousedown = function (e) {
//画布清空
//canvas.width = 900;
//清除一块矩形区域
ctx.clearRect(0,0, canvas.width,canvas.height);
//开启路径
ctx.beginPath();
//起点
ctx.moveTo(e.offsetX, e.offsetY);
//3.监听鼠标移动
canvas.onmousemove = function (e) {
//终点
ctx.lineTo(e.offsetX, e.offsetY);
ctx.strokeStyle = 'orange';
ctx.lineWidth = 4;
//描边
ctx.stroke();
};
//4.监听鼠标抬起
canvas.onmouseup = function () {
//取消事件
canvas.onmousemove = null;
canvas.onmouseup = null;
}
}
绘制弧线
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.画弧
/*ctx.arc(200, 200, 100, 0, 90 *Math.PI/180);
ctx.strokeStyle = 'red';
ctx.lineWidth = 4;*/
//逆时针画弧
//counterclockwise：是否是逆时针。true是逆时针，false：顺时针(默认)
ctx.arc(200, 200, 100, 0, 90 *Math.PI/180, true);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 6;
//描边
ctx.stroke();
//填充颜色
ctx.fillStyle = 'green';
ctx.fill();
非零正交原则
- 填充时候判断，当正交数值为0时不绘制，与逆时针边线相交，正交数值-1，与顺时针边线相交，正交数值+1，非0时填充，为0时不填充
绘制奥运五环
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.第一个五环
var colorArr = ['red', 'green','blue', 'black', 'yellow'];
for(var i = 0;i< colorArr.length;i++)
{
//开启路径
ctx.beginPath();
ctx.arc((i +1) * 100, 100, 80, 0, 2*Math.PI);
ctx.strokeStyle = colorArr[i];
ctx.lineWidth = 4;
ctx.stroke();
}
//第二个五环
for(var i = 0;i
绘制饼状图
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.数据
var data = [
{name:'北京', color:'yellow', value:0.3},
{name:'上海', color:'red', value:0.2},
{name:'杭州', color:'green', value:0.1},
{name:'深圳', color:'blue', value:0.15},
{name:'广州', color:'pink', value:0.25}
];
//3.常量
//圆心
var x0 = canvas.width * 0.5;
var y0 = canvas.height * 0.5;
//半径
var radius = 150;
//开始角度
var beginAngle = -90 *Math.PI/180;
//4.绘制饼状图
for(var i = 0;i
绘制文字
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.绘制文字
ctx.font = "100px '微软雅黑'";
ctx.strokeStyle = 'blue';
//绘制无填充文字
ctx.strokeText('SeeMyGo', 200, 200);
//填充文字颜色
ctx.fillStyle = 'purple';
//绘制填充的文字
ctx.fillText('SeeMyGo', 200, 200);
//3.文字对齐
//注意:默认系统会给文字添加一条看不见的基线,只有对文字对齐方式修改,就是根据基线设置
//开启路径
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 4;
//3.1 垂直对齐方式
// ctx.textAlign = 'center';
//3.2 水平方向的对齐方式
// ctx.textBaseline = 'top';
//4.文字阴影
//阴影模糊范围
ctx.shadowBlur = 15;
//阴影的颜色
ctx.shadowColor = 'blue';
//偏移
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 15;
//绘制第二个文字
ctx.strokeText('Html5', 200, 350);
ctx.fillText('Html5', 200, 350);
给饼状图添加文字
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.数据
var data = [
{name:'北京', color:'yellow', value:0.3},
{name:'上海', color:'red', value:0.2},
{name:'杭州', color:'green', value:0.1},
{name:'深圳', color:'blue', value:0.15},
{name:'广州', color:'pink', value:0.25}
];
//3.常量
//圆心
var x0 = canvas.width * 0.5;
var y0 = canvas.height * 0.5;
//半径
var radius = 150;
//开始角度
var beginAngle = -90 *Math.PI/180;
//4.绘制饼状图
for(var i = 0;i 90 *Math.PI/180) && (textAngle < 270 * Math.PI/180)){
ctx.textAlign = 'end';
}
//绘制文字
ctx.fillText(text, textX, textY);
//根据结束角度更新起始角度,作为下一个扇形的起始角度
beginAngle = endAngle;
}
绘制图片
//1.获取canvas和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//2.标签绘制-方式一
/*var img = document.getElementById('icon');
//注意:图片的绘制,一定要在加载完后绘制
img.onload = function () {
ctx.drawImage(img, 200, 200);
}*/
//3.对象绘制-方式二
/*var img = new Image();
img.src = 'images/img_01.jpg';
//加载完后绘制图片
img.onload = function () {
ctx.drawImage(this, 200, 200);
}*/
//4.等比例绘制图片-方式三
/* var img = new Image();
img.src = 'images/img_02.jpg';
//加载完后绘制图片
//等比公式
// 设定高/ 设定宽 = 图片高度 / 图片宽度;
// 设定高 = 图片高度 / 图片宽度 * 设定宽;
var w = 200;
img.onload = function () {
//计算高度
var h = img.height /img.width * w;
ctx.drawImage(this, 200, 200, w, h);
};*/
//5.截取图片-方式四
var img = new Image();
img.src = 'images/img_01.jpg';
img.addEventListener('load', function () {
//img: 截取图片
//50,50,120,120 截取的图片的x,y 和宽高
//200, 200, 120,120 在画布上的x,y 和画布上显示的宽高
ctx.drawImage(img, 50,50,120,120, 200, 200, 200,200);
})
绘制帧动画
//1.获取上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//常量
var duration = 200;//定时器时间
var imgClipWH = 256;//截取宽高
var index = 0; //图片角标, x
var dir = 0;//方向 , 默认为0,代表往左
//2.图片对象
var image = new Image();
image.src = 'images/girl.png';
//图片加载完后绘制
image.addEventListener('load', function () {
//备份指针
var self = this;
//开启定时器
setInterval(function () {
//清空
ctx.clearRect(0, 0, canvas.width, canvas.height);
//截图
ctx.drawImage(self, index * imgClipWH, dir * imgClipWH, imgClipWH, imgClipWH, 200,200,imgClipWH,imgClipWH);
index++;
//取模, 无限循环
index %= 8;
}, duration);
//3.监听按钮点击
var buttonList = document.querySelectorAll('button');
console.log(buttonList);
//遍历,添加事件
for(var i = 0;i
