【HTML】Canvas(4)-进阶

最新推荐文章于 2021-07-05 15:29:35 发布

励志故事

最新推荐文章于 2021-07-05 15:29:35 发布

阅读量1.2k

点赞数

分类专栏： Web前端文章标签： canvas

本文链接：https://blog.csdn.net/LZGS_4/article/details/44907687

版权

本文介绍了HTML Canvas的高级特性，包括使用scale函数实现图形的放大和缩小，translate函数进行平移，以及图形的颜色渲染如渐变、反色和颜色合成。还探讨了如何自定义画板以及实现画板的导出功能。

摘要由CSDN通过智能技术生成

canvas高级功能

放大与缩小：用scale函数来实现图形的放大和缩小

原型：scale(x,y); x表示在x轴进行缩放，即水平缩放；y表示在y轴上进行缩放，即竖直方向缩放。

放大：

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	//以(10,10)为坐标起点开始绘制一个长150，宽100的黑色矩形
	ctx.beginPath();
	ctx.strokeStyle='#000';
	ctx.strokeRect(10,10,150,100);

	//沿着x轴和y轴的方向将其值放大3倍，并用同样的代码重新绘制一个灰色的矩形
	ctx.scale(3,3);
	ctx.beginPath();
	ctx.strokeStyle='#ccc';
	ctx.strokeRect(10,10,150,100);

从运行效果看出，虽然用了同样的代码，但是第二次绘制的灰色矩形被放大了3倍，且起始坐标也一起被放大了3倍

缩小：

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');
	
	//以(50,50)为坐标起点开始绘制一个长150，宽100的黑色矩形
	ctx.beginPath();
	ctx.strokeStyle='#000';
	ctx.strokeRect(50,50,150,100);

	//沿着x轴和y轴的方向将其值缩小0.5倍，并用同样的代码重新绘制一个灰色的矩形
	ctx.scale(0.5,0.5);
	ctx.beginPath();
	ctx.strokeStyle='#ccc';
	ctx.strokeRect(50,50,150,100);

从运行效果看出，虽然用了同样的代码，但是第二次绘制的灰色矩形被缩小了0.5倍，且起始坐标也一起被小了0.5倍。

使用scale函数时，若参数为负数，可以使图形翻转：

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	var image=new Image();
	image.src='../images/travel.jpg';
	image.οnlοad=function(){
		ctx.drawImage(image,0,0);
		ctx.scale(1,-1);		//设置负数，使图片翻转
		ctx.drawImage(image,192,-168);
	};

平移：translate()函数

原型：translate(x,y); x表示在x轴进行平移，即水平方向上平移；y表示在y轴上进行平移，即竖直方向上平移

var c=document.getElementById('mycanvas');
	var ctx=c.getContext('2d');

	ctx.beginPath();
	ctx.strokeStyle='#000';
	ctx.strokeRect(10,10,150,100);

	ctx.translate(50,100);		//表示在水平方向右移50，垂直方向下移100
	ctx.beginPath();
	ct