HTML5 混合APP开发学习笔记（十三）——Canvas绘图

最新推荐文章于 2022-03-25 22:52:53 发布

123，机器人

最新推荐文章于 2022-03-25 22:52:53 发布

阅读量436

点赞数

分类专栏： HTML5混合APP 文章标签： HTML5

本文链接：https://blog.youkuaiyun.com/weixin_43569314/article/details/90609861

版权

HTML5混合APP 专栏收录该内容

17 篇文章

订阅专栏

Canvas绘图

简介：

使用js绘制各种图形
Canvas相当于一块矩形画布
在坐标系上进行像素级操作

创建画布语句：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

绘画的渲染上下文对象获取：
var ctx=document.getElementById(“myCanvas”) .getContext(“2d”);

绘制图形

直线

相关api
代码：

	var ctx=document.getElementById("myCanvas") .getContext("2d");
	ctx.strokeStyle = "red";
	ctx.lineWidth = 2;
    ctx.beginPath(); //新建一条path
    ctx.moveTo(50, 50); //把画笔移动到指定的坐标
    ctx.lineTo(200, 50);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
    ctx.closePath();//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
    ctx.stroke(); //绘制路径。

贝塞尔曲线

语法：
二次贝塞尔曲线: ctx.quadraticCurveTo(cpx,cpy,x,y);
三次贝塞尔曲线: ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
相关参数意义:
其中cp1x和cp1y分别表示第一个控制端点的x坐标和y坐标
cp2x和cp2y别表示第二个控制端点的x坐标和y坐标
x和y分别表示终止点的x和y坐标
代码：

	var ctx=document.getElementById("myCanvas") .getContext("2d");
	ctx.moveTo(20,20);
	ctx.quadraticCurveTo(20,100,200,20);
	ctx.stroke();

矩形

语法：
rect(x,y,width,height) :矩形边框，可填充颜色
strokeRect(x,y,width,height) ：矩形边框，不可填充颜色
fillRect(x,y,width,height) ：被填充的矩形，无边框
参数含义:
x，y 为矩形左上角坐标
width，height 为矩形的长宽
实例

	var ctx = document.getElementById("mycanvas").getContext("2d"); //获取渲染上下文对象
	ctx.fillStyle="red";
	//绘制矩形，它可以被填充
	ctx.rect(20,20,200,100);
	ctx.stroke();
	ctx.fill();
	//绘制矩形，填充对它无效
	ctx.strokeRect(20,150,200,100);
	ctx.stroke();
	ctx.fill();
	//绘制填充好的矩形
	ctx.fillRect(250,50,200,100);
	ctx.stroke();

圆弧

语法：arc(x, y, r, startAngle, endAngle, anticlockwise)
参数含义：
以(x, y)为圆心，以r为半径
从 startAngle弧度开始到endAngle弧度结束（这里的度数都是弧度）
anticlosewise是布尔值，true表示逆时针，false表示顺时针(默认是顺时针
实例

	var ctx = document.getElementById("mycanvas").getContext("2d"); //获取渲染上下文对象
	ctx.strokeStyle="red";
	//逆时针绘制0~3π/2的圆弧
	ctx.arc(350,100,50,0,3/2*Math.PI,true);
	ctx.stroke();

绘制填充

使用fillStyle设置填充颜色，然后用fill()进行填充
代码：(在ctx.stroke() 之后)

	ctx.fillStyle = "blue";
	ctx.fill();

注意：如果路径未关闭，那么fill()方法会从路径结束点到开始点之间添加一条直线，以关闭该路径，然后填充路径。

渐变色

线性渐变色
语法：ctx.createLinearGradient(xStart,yStart,xEnd,yEnd);
颜色插值： addColorStop(offset,color);
参数含义：
其中参数xStart和yStart表示渐变的起点的坐标
xEnd和yEnd表示渐变的终点的坐标
实例：

	var ctx = document.getElementById("mycanvas").getContext("2d"); //获取渲染上下文对象
	//创建线性颜色渐变方式的CanvasGradient对象
	var grad=ctx.createLinearGradient(60,200,160,200);
	//设置颜色基准
	grad.addColorStop(0,"yellow");
	grad.addColorStop(0.5,"green");
	grad.addColorStop(1,"red");
	ctx.beginPath();
	ctx.lineWidth=10;
	//把CanvasGradient对象赋给strokeStyle属性
	ctx.strokeStyle=grad;
	ctx.moveTo(60,200);
	ctx.lineTo(160,200);
	ctx.closePath();
	ctx.stroke();

放射渐变色
语法：ctx.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
参数含义：
参数xStart和yStart表示开始圆的圆心坐标
radiusStart表示开始圆的半径
xEnd和yEnd表示结束圆的圆心坐标
radiusEnd表示结束圆的半径。
实例:

	var ctx = document.getElementById("mycanvas").getContext("2d"); //获取渲染上下文对象
	var grad2=ctx.createRadialGradient(300,200,0,300,200,100);
	//设置颜色基准
	grad2.addColorStop(0,"yellow");
	grad2.addColorStop(0.5,"green");
	grad2.addColorStop(1,"red");
	ctx.beginPath();
	//arc(x,y,r,start,stop)绘制圆
	ctx.arc(300,200,100,0,2*Math.PI);
	ctx.closePath();
	ctx.lineWidth=1;
	ctx.stroke();
	//把CanvasGradient对象赋给fillStyle属性
	ctx.fillStyle=grad2;
	ctx.fill();

文字

语法：
font:设置字体及大小
fillText(string text, int x, int y [, maxWidth])：绘制实心字
strokeText(string text, int x, int y [, maxWidth])：绘制空心字
参数含义：在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
实例

	var ctx = document.getElementById("mycanvas").getContext("2d"); //获取渲染上下文对象
	ctx.font = "30px 微软雅黑";
	//绘制实心文字 
	ctx.fillStyle="blue";
	ctx.fillText("HTML5 App开发学习",50,50);
	//绘制空心文字
	ctx.strokeStyle="red";
	ctx.strokeText("HTML5 App开发学习",50,100);

图片

语法：
- 绘制 img 标签元素中的图片:ctx.drawImage(img,x,y);
- 缩放图片:drawImage(image, x, y, width, height)
- 裁剪:drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
参数含义：
- 在指定的坐标点(x,y)处绘制图片对象img
- 指定宽度width和高度height
- 裁减图片对象img，起点坐标为(sx,sy)，裁减大小宽度和高度分别为(sWidth,sHeight),在指定的坐标点(x,y)处绘制图片对象img
实例

	var ctx = document.getElementById("mycanvas").getContext("2d"); //获取渲染上下文对象
	//生成图片对象
	var img=new Image();
	img.onload=function(){
		//原版大小绘图
		ctx.drawImage(this,10,10);
		//指定大小绘图
		ctx.drawImage(this,300,10,150,80);
		//裁剪图片以指定大小绘图
		ctx.drawImage(this,200,80,135,180,150,40,70,90);
	};
	img.src="../img/baidu.png";

擦除

语法：ctx.clearRect(x,y,width,height);
参数含义：以 （x,y） 为左上角顶点清空一块矩形区域
意义：常常用作实现动画功能

坐标变换

语法：
1. ctx.translate(x,y) 将原点平移到指定位置（x,y）处
2. ctx.rotate(angle) 将坐标体系旋转angle弧度，正值表示顺时针方向旋转，负值表示逆时针方向旋转。
3. ctx.scale(x,y) 将坐标体系进行缩放，x,y是缩放因子，必须是正值
4. ctx.save() 将当前坐标体系状态入栈
5. ctx.restore() 将上一个保存的坐标体系状态从栈中再次取出，恢复该状态的所有设置
  一般在变换坐标前使用 save() 命令，操作结束后使用.restore() 命令

像素操作

语法：
- ctx.getImageData(x,y,width,height)
  返回 ImageData 对象，该对象包含了画布上指定矩形的像素数据，其中x,y是所取区域的左上角坐标，width和heigth分别是所取区域的宽度和高度。
  返回的ImageData对象中有个data属性，它是个数组，数组中的每4个元素分别对应一个像素的
  R（红色，值0~255）、
  G（绿色，值0~255）、
  B（蓝色，值0~255）、
  A（透明度，值0~255）
- ctx.putImageData(imgData,x,y) 将处理好的ImageData对象放回到Canvas画布上
- ctx.createImageData(width,height) 创建新的、空白的ImageData对象，width和height是指定的宽度和高度。
  可以实现对图像的各种操作，通过一些算法就能完成PS的基础功能