canvas的常用api
canvas
标签
<canvas width="600" height="400" id="canvas"></canvas>
不给宽高的话默认是300+150
怎么用
//拿到canvas
var canvas = document.getElementById("canvas");
//创建画图工具
var context = canvas.getContext("2d");
相关的api及用法
//画线
context.moveTo(100, 100);
context.lineTo(300, 100);
context.lineTo(300, 200);
//画第二条线
//画第二条线
context.moveTo(100, 300);
context.lineTo(300, 300);
//最后要描边才会出效果
context.stroke();
//创建一张新的玻璃纸
context.beginPath();
//画第三条线
context.moveTo(500, 100);
context.lineTo(500, 300);
//只要执行stroke，都会玻璃纸上的图形重复印刷一次
context.stroke();
//填充
context.fill();
//设置描边色
context.strokeStyle = "red"; //颜色的写法和css写法是一样的
context.stroke();
//填充
//设置填充色
context.fillStyle = "yellowgreen";
context.fill();
//把路径闭合
context.closePath();
//设置线条的粗细， 不需要加px
context.lineWidth = 15;
//线条的头部的设置
context.lineCap = "round"; //默认是butt， 记住round
非零填充原则
在由路径围成的区域内部，任意一个点， 拉一条射线。 看和这个射线相交的路径有几条。 路径的方向是顺时针，就是1. 如果逆时针，就是-1， 把所有的值相加， 如果是0， 就不填充， 如是非0， 就填充
画矩形
//直接传入 x， y， width， height， 就可以绘制一个矩形
//画在玻璃纸上
context.rect(100, 100, 200, 200);
context.strokeStyle = "red";
context.stroke();
context.fillStyle = "yellow";
context.fill();
//直接创建一个填充的矩形
//创建玻璃纸， 画矩形路径， 填充， 把玻璃纸销毁
context.fillRect(100, 100, 200, 200);
//黄色的边不会显示，是因为上面那一句，画完之后，就把玻璃纸销毁了
context.strokeStyle = "yellow";
context.stroke();
//如果放在fillRect上面就可以实现
圆形绘制
//x轴是0度开始
//x, y: 圆心位置；radius： 半径的长度; startRadian, endRadian 代表的是起始弧度和结束弧度；dircetion代表的圆形的路径的方向，默认是顺时针（是否逆时针， 默认值是false），如果传true就是逆时针,最后一个参数是可以不传的， 默认就是顺时针
context.arc(x, y, radius, startRadian, endRadian, direction);
//从31度的地方，画到81度的地方
context.arc(300, 200, 100, 31/180*Math.PI, 81/180*Math.PI);
画飞镖转盘
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
for (var i = 0; i < 10; i++) {
context.moveTo(320+i*20,200);
// i % 2代表是奇数还是偶数， 偶数就逆时针， 奇数就顺时针
context.arc(300, 200, 20 + i * 20, 0, 2*Math.PI, i%2==0);
}
context.fillStyle = "green";
context.fill();
context.stroke();
线性渐变
//1. 需要创建出一个渐变对象
// var gradient = context.createLinearGradient(100, 100, 300, 100);
//参数代表哪个点到哪个点，这里写的是左上角到右下角的意思
var gradient = context.createLinearGradient(100, 100, 300, 380);
//2. 添加渐变颜色
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "hotpink");
gradient.addColorStop(1, "yellowgreen");
//3. 将渐变对象设为填充色
context.fillStyle = gradient;
//4. 画一个矩形
context.fillRect(100, 100, 200, 280);
径向渐变
//1. 创建渐变对象
//内圆
var c1 = {x: 260, y: 160, r: 0};
//外圆
var c2 = {x: 300, y: 200, r: 120};
var gradient = context.createRadialGradient(c1.x, c1.y, c1.r, c2.x, c2.y, c2.r);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.3, "yellow");
gradient.addColorStop(0.6, "green");
gradient.addColorStop(1, "orange");
//2. 把渐变对象设为填充色
context.fillStyle = gradient;
//3. 画圆并填充
//内圆的部分是用0的位置填充的; 内圆的边到外圆的边所发生的渐变叫， 径向渐变
context.arc(c2.x, c2.y, c2.r, 0, 2*Math.PI);
context.fill();
径向渐变画球
//1. 创建一个径向渐变
c1 = {x: 240, y: 160, r: 0};
c2 = {x: 300, y: 200, r: 120};
var gradient = context.createRadialGradient(c1.x, c1.y, c1.r, c2.x, c2.y, c2.r);
gradient.addColorStop(1, "gray");
gradient.addColorStop(0, "lightgray");
//2. 将渐变对象设为填充色
context.fillStyle = gradient;
//3. 画圆并填充
context.arc(c2.x, c2.y, c2.r, 0, 2*Math.PI);
context.fill();
径向渐变画彩虹
//实现彩虹，给里面的圆一个半径80是关键
var c1 = {x: 300, y: 200, r: 80};
var c2 = {x: 300, y: 200, r: 150};
var gradient = context.createRadialGradient(c1.x, c1.y, c1.r, c2.x, c2.y, c2.r);
gradient.addColorStop(1, "red");
gradient.addColorStop(6/7, "orange");
gradient.addColorStop(5/7, "yellow");
gradient.addColorStop(4/7, "green");
gradient.addColorStop(3/7, "cyan");
gradient.addColorStop(2/7, "skyblue");
gradient.addColorStop(1/7, "purple");
gradient.addColorStop(0, "white");
//设为填充色
context.fillStyle = gradient;
//画圆并填充
context.arc(c2.x, c2.y, c2.r, 0, 2*Math.PI);
context.fill();
//遮挡下半部分
context.fillStyle = "white";
context.fillRect(0, 200, 600, 200);
阴影效果
//和css3相比， 阴影只能设一个， 不能设内阴影
//水平偏移， 垂直的偏移， 模糊程度， 阴影的颜色
//设置阴影的参数
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = "yellowgreen";
//画一个矩形
context.fillStyle = "red";
context.fillRect(100, 100, 300, 200);
绘制文字api
//绘制文字
//text就是要绘制的文字， x， y就是从什么地方开始绘制
//context.strokeText("text", x, y)
context.font = "60px 微软雅黑";
//context.strokeText("hello, world", 100, 100);
context.fillText("hello, world", 100, 100);
文字对齐方式
基线在文字的那个方向
水平方向
//默认在left
//关键api：context.textAlign = "left";
context.textAlign = "left";
context.fillText("left", 300, 120);
context.textAlign = "center";
context.fillText("center", 300, 190);
context.textAlign = "right";
context.fillText("right", 300, 260);
实现文字在画布的右上方
1. 先设置right
2. 给canvas.width,0即可
context.font = "60px 微软雅黑";
context.textAlign = "right";
context.textBaseline = "top";
context.fillText("hello, world", canvas.width, 0);
垂直方向
//默认是top
//关键api：context.textBaseline = "top";
context.fillText("default", 50, 200);
context.textBaseline = "top";
context.fillText("top", 150, 200);
context.textBaseline = "middle";
context.fillText("middle", 251, 200);
context.textBaseline = "bottom";
context.fillText("bottom", 400, 200);
图片的绘制
3参模式： 将img从x, y的地方开始绘制， 图片有多大，就绘制多大，超出canvas的部分就不显示了
//context.drawImage(img, x, y)
var image = new Image();
image.src = "./img/gls.jpg";
//必须要等到图片加载出来，才能进行绘制的操作
image.onload = function () {
context.drawImage(image, 100, 200);
}
5参模式（缩放模式）, 就是将图片显示在画布上的某一块区域（x, y, w, h）,如果这个区域的宽高和图片不一至，会被压缩或放大
var image = new Image();
image.src = "./img/gls.jpg";
image.onload = function () {
context.drawImage(image, 100, 100, 100, 100);
}
图片绘制的九参模式， 就是把原图（img）中的某一块（imagex，imagey，imagew，imageh）截取出来， 显示在画布的某个区域(canvasx, canvasy, canvasw, canvash)
//理解关键：
//（imagex，imagey，imagew，imageh）
//(canvasx, canvasy, canvasw, canvash)
var image = new Image();
image.src = "./img/gls.jpg";
image.onload = function () {
/*
参数的解释：
image： 就是大图片本身
中间的四个参数， 代表从图片的150， 0的位置，截取 150 * 200的一块区域
后面的四个参数， 将刚才截取的小图， 显示画布上 100， 100， 150， 200的这个区域
*/
context.drawImage(image, 150, 0, 150, 200, 100, 100, 150, 200);
}
画布中的放大器实现
判断位置的关键api:
context.rect(0, 0, 150, 100);
canvas.onmousemove = function (event) {
var x = event.offsetX;
var y = event.offsetY;
}
//1. 加载图片
var image = new Image();
image.src = "./img/gls.jpg";
image.onload = function () {
//1. 先把大图画在右上角
context.drawImage(image, 0, 0, 150, 100);
//创建一个矩形的路径
context.rect(0, 0, 150, 100);
//2. 判断当前鼠标是否hover到上面的图片上了
canvas.onmousemove = function (event) {
//原图和左上角的图的比例是3： 1
var x = event.offsetX;
var y = event.offsetY;
//if (x >= 0 && x<=150 && y >=0 && y <= 100) {}
//当前 x， y这个点的位置，是否在玻璃纸上的路径的区域的内部
if (context.isPointInPath(x, y) == true) {
console.log("在内部");
//比例要按照原图的比例来看，这里的小图是原图的1/3，所以*3
x = x * 3 - 20;
y = y * 3 - 20;
//每一次在画之前，先把之前画的擦除
//某300， 200， 300， 200这个区域的东西全部擦除
context.clearRect(300, 200, 300, 200);
//从x， y这个点，截取40*40的局部小图，显示在图布， 300， 200， 80， 80这个区域，就形成了一个放大的效果
//这里40，40，是因为上面-20的宽和高的原因
context.drawImage(image, x, y, 40, 40, 300, 200, 120, 120);
}
else {
console.log("不在内部");
}
}
}
简单的用计时器实现小人移动
//1. 加载图片
var image = new Image();
image.src = "./img/DMMban.png";
image.onload = function () {
//第几行图片
var yindex = 2;
//某一行的第几张图片
var xindex = 0;
//小人的宽和高
var w = image.width/4;
var h = image.height/4;
//小人水平方向的坐标x值
var x = 0;
//小人每一步走多远
var speed = 10;
var index = 0;
setInterval(function () {
index += 1;
//循环切换图片
xindex = index % 4;
//边界的判断
if (x >= canvas.width - w) {
speed = -speed; //-10
yindex = 1;
}
if (x < 0) {
speed = -speed;
yindex = 2;
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, xindex * w, yindex * h, w, h, x, 200, w, h);
//每走一步x要往前移动
x += speed;
}, 200);
}
画布的缩放，平移，旋转api
context.scale(0.5, 0.5);
context.translate(300, 200);
context.rotate(30/180*Math.PI);
浙公网安备 33010602011771号