canvas

使用Canvas画基本图形
• Canvas的坐标体系
• 使用Canvas画直线、矩形、圆形
• 为图形设置样式

Canvas坐标体系
• canvas默认大小：300x150
• 通过HTML、CSS、JavaScript设置width和height的区别
– HTML和JavaScript设置的是画布大小
– CSS设置的是画布缩放后的大小
• 坐标系原点及方向
– 原点在左上角，向右为x方向，向下为y方向

画直线、矩形和圆形
• 画直线：ctx.moveTo(x1, y1)， ctx.lineTo(x2, y2)
• 画圆形： ctx.arc(x, y, radius, 0, Math.PI*2, true)
• 画矩形：可以通过直线来画，也可以直接用
ctx.strokeRect(x1, y1, x2, y2)

例子

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 400;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 150, 100, 0, Math.PI * 2, true);
ctx.closePath();
ctx.stroke();
ctx.strokeRect(100, 100, 100, 100);

beginPath和closePath
• beginPath和closePath并不是成对出现的
• beginPath的作用是开始一条新路径
• closePath的作用是使当前路径闭合

ctx.beginPath();

ctx.closePath();

描边与填充样式
• strokeStyle用来设置画笔样式，也就是直线、曲线、边框的
样式
• fillStyle用来设置画刷的样式，也就是填充样式
• lineWidth设置线条的粗细
注意：这里的样式，是指颜色、渐变色等

Canvas中的图形变换
图形变换都是针对坐标系而言
√ 平移：ctx.translate(x, y)
√ 旋转：ctx.rotate(rad)
√ 缩放：ctx.scale(x, y);

例子

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 400;
ctx.beginPath();
//ctx.save();
for(var i=0; i<10; i++) {
ctx.translate(0, 20);
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
}
//ctx.restore();
ctx.stroke();
//ctx.fillRect(-5, -5, 10, 10);
ctx.beginPath();
ctx.translate(300, 0);
//ctx.fillRect(-5, -5, 10, 10);
//ctx.scale(0.5, 1);
for(var i=0; i<10; i++) {
ctx.rotate(Math.PI / 5);
ctx.moveTo(-50, 0);
ctx.lineTo(50, 0);
}
ctx.stroke();

save和restore
用来保存和恢复上下文的环境ctx，一般成对出现
√ ctx.save()：保存当前上下文环境；
√ ctx.restore()：恢复到上一次的上下文环境。

Canvas中的渐变
• 线性渐变：ctx.createLinearGradient(xStart, yStart, xEnd,yEnd);
– (xStart, yStart)是线段起点，(xEnd, yEnd)是线段终点
– 起点到终点之间的颜色呈渐变
• gradient.addColorStop可以来控制渐变的颜色
• 渐变可以理解为一种颜色

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 400;
var linearGradient = ctx.createLinearGradient(50, 50, 150, 150);
linearGradient.addColorStop(0, 'rgb(255,0,0)');
linearGradient.addColorStop(0.5, 'rgb(0,255,0)');
linearGradient.addColorStop(1, 'rgb(0,0,255)');
ctx.fillStyle = linearGradient;
ctx.fillRect(0, 0, 200, 200);
ctx.beginPath();
ctx.arc(400, 150, 100, 0, Math.PI * 2, true);
ctx.closePath();

径向渐变：
ctx.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEn
d,radiusEnd);
– (xStart,yStart)是第一个圆的圆心，radiusStart是第一个圆的半径，(xEnd,yEnd)是第二个圆的圆心，radiusEnd是第二个圆的半径
– 第一个圆到第二个圆之间的颜色呈渐变

var radialGradient = ctx.createRadialGradient(400, 150, 0, 400, 150, 100);
radialGradient.addColorStop(0, 'rgb(255,0,0)');
radialGradient.addColorStop(1, 'rgb(0,0,255)');
ctx.fillStyle = radialGradient;
ctx.fill();

Canvas中的文字
• 描边文字：ctx.strokeText(text, x, y)
• 填充文字：ctx.fillText(text, x, y);
• 设置字体样式：ctx.font
– 例如ctx.font = "bold 100px sans-serif";
• 设置水平对齐方式：ctx.textAlign
– left, start，左对齐；center，居中对齐；end,right，右对齐

• 设置垂直对齐方式：ctx. textBaseline
– top，顶对齐；middle，居中；bottom，底部对齐
• 计算文本宽度：ctx.measureText(text).width
– 须在设置字体样式之后计算

例子1

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 400;
ctx.font = "bold 100px sans-serif";
ctx.textAlign = "center"; //居中
ctx.fillStyle = "#FF0000";
ctx.fillText("慕课网", 300, 100); //位置调整
ctx.strokeStyle = "#0000FF";
ctx.strokeText("慕课网", 300, 300);
console.log(ctx.measureText("慕课网").width); //获取文本的宽度

例子2

var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
//此处补充代码
context.arc(250,250,100,0,2*Math.PI,true);
context.storkeStyle='#000';
context.stroke();
var str = 'canvas';
context.font='20px 微雅软黑';//字体大小
context.textAlign='center'//水平对齐
//垂直对齐 top middle bottom
context.textBaseline='middle' //垂直对齐
context.fillText(str,250,250)
//文本的宽度
console.log(context.measureText(str).width)

Canvas图片
• 绘制图片3种方法
– ctx.drawImage(image,x,y)，该方法把图片绘制在(x,y)处
– ctx.drawImage(image,x,y,w,h)，该方法把图片绘制在(x,y)处，并缩放为宽w，高h
– ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)，该方法把图片中(sx,sy)处的宽sw，高sh的区域，绘制到(dx,dy)处，并缩放为宽dw，高dh

在Image加载完成之后绘制
– 例：
var img = new Image();
img.src = "logo.png";
img.onload = function () {
ctx.drawImage(img, 0, 0, 40, 40, 0, 0, 80, 80);
}

例子

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 400;
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
var img = new Image();
img.src = "logo.png";
img.onload = function () {
ctx.drawImage(img, 0, 0, 40, 40, 0, 0, 80, 80);
}

Canvas图形画刷
• ctx.createPattern可以创建一个画刷模式，进而可以设置到
fillStyle里，进行画刷的填充
• 函数原型：ctx.createPattern(image, type)
type取值：no-repeat：不平铺
repeat-x：横方向平
repeat-y：纵方向平铺
repeat：全方向平铺

例子

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// ctx.canvas.width = 600;
// ctx.canvas.height = 400;
// ctx.fillStyle = "#000000";
// ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
var img = new Image();
img.src = "logo.png";
img.onload = function () {
var pattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// 修改图像数据
var imageData = ctx.getImageData(100, 100, ctx.canvas.width-200, ctx.canvas.height-200);
for(var i=0; i<imageData.data.length; i+=4) {
imageData.data[i + 0] = 255 - imageData.data[i + 0];
imageData.data[i + 1] = 255 - imageData.data[i + 1];
imageData.data[i + 2] = 255 - imageData.data[i + 2];
}
ctx.putImageData(imageData, 100, 100);
}

Canvas剪切区域

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 400;
ctx.beginPath();
ctx.arc(200, 150, 100, 0, Math.PI * 2, true);
ctx.strokeText("慕课网", 200, 150);
ctx.closePath();
ctx.clip();
ctx.fillStyle = "#FF0000";
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = "#0000FF";
ctx.fillRect(200, 150, 200, 200);

Canvas阴影绘制

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 400;
ctx.shadowOffsetX = 10; //x轴的偏移
ctx.shadowOffsetY = 10; //y轴的偏移
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; //偏移的背景颜色
ctx.shadowBlur = 1.5; //模糊效果
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillRect(100, 100, 100, 100);

Canvas绘制曲线

var showPoint = function(ctx, x, y) {
ctx.fillRect(x-5, y-5, 10, 10);
}
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 400;
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI, true);
ctx.stroke();
// 二次样条工具 http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
ctx.beginPath();
ctx.moveTo(50, 350);
ctx.quadraticCurveTo(100, 250, 150, 350);
ctx.stroke();
showPoint(ctx, 50, 350);
showPoint(ctx, 100, 250);
showPoint(ctx, 150, 350);
// 贝塞尔工具http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
ctx.beginPath();
ctx.moveTo(200, 350);
ctx.bezierCurveTo(200, 250, 300, 250, 300, 350);
ctx.stroke();
showPoint(ctx, 200, 350);
showPoint(ctx, 200, 250);
showPoint(ctx, 300, 250);
showPoint(ctx, 300, 350);

Canvas动画

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.canvas.width = 600;
ctx.canvas.height = 400;
var posx = 0, posy = 0;
var timer = setInterval(function() {
posx = posx + 10;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);//清除之前的图像
ctx.fillRect(posx, posy, 50, 50);
if(posx > 350) {
clearInterval(timer);
}
}, 100);

posted @ 2018-12-07 13:19 键1234 阅读(191) 评论(0) 编辑收藏举报

指间灵动，快码加编

刷新页面返回顶部

键1234

canvas

公告