canvas绘图调用方法

最新推荐文章于 2022-09-19 18:48:57 发布

nobSlience

最新推荐文章于 2022-09-19 18:48:57 发布

阅读量1.4k

点赞数

分类专栏： html5学习笔记文章标签： canvas javascript html5

本文链接：https://blog.csdn.net/qq_15508113/article/details/50880265

版权

html5学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这次记录一下有关canvas中一些方法的调用，从在画布当中绘制出自己的图像。

首先调用绘图画布的方法getContext(context)来绘制图形。context的属性值一般为2d。

绘制图形中，有两种形式，一种是线条型，另一种是填充型。分别采用的属性为：strokeStyle(x,y,width,height)、fillStyle(x,y,width,height).

例：绘制出两个不同类型的矩形。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title style="text-align:center">canvas绘制图像</title>
 </head>

 <body>
 	<div id="canvasbox">
		<canvas id="canvas" width="500" height="300">你的浏览器不兼容canvas动画</canvas>
	</div>
	<script>
		function initiate(){
		var ele = document.getElementById("canvas");
		canvas = ele.getContext("2d");
		canvas.strokeRect(100,100,120,120);
		canvas.fillRect(110,110,100,100);
		canvas.clearRect(120,120,80,80);
		}
		window.addEventListener("load",initiate,false);
	</script>
 </body>
</html>

得到了绘制的图形如下：

这里面还调用了clearRect()方法绘制出不含像素的矩形。也可以通过调用一定的方法从而改变图形的颜色。这里可以用strokeStyle、fillStyle来改变颜色。具体的属性赋值为canvas.strokeStyle=color。而用globalAlpha来改变画布中所有图形的透明度。

在绘制渐变线时，可以用createLinear Gradient(x1,y1,x2,y2)线性渐变，createRadialGradient(x1,y1,r1,x2,y2,r2)，配合addColorStop(position,color)设置渐变效果。其中position的值0.0~1.0。(这里的渐变效果还是没懂，希望查找资料之后能改进)

function initiate(){
		var ele = document.getElementById("canvas");
		canvas = ele.getContext("2d");
		var grad = canvas.createLinearGradient(0,0,10,100);
		grad.addColorStop(0.5,'#00f');
		grad.addColorStop(1,'#000');
		canvas.fillStyle = grad;
		canvas.fillRect(10,10,100,100);

		canvas.fillRect(120,10,200,100);
		}
		window.addEventListener("load",initiate,false);

在画布中可以创建画笔的路径，从而清晰确定画笔的移动路线。

在创建之前，必须调用beginPath()方法创建路径。

closePath()为关闭路径，将最后一个点与原点通过直线连接。在需要保持开放路径，即不需要图形闭合时不需要调用此方法。还有一种情况不需要调用关闭路径方法，绘制图形时，采用的是fill()填充方法，不需要进行最后的连接。

fill()和stroke()可以在画布上绘制路径，也就是对线条进行喷墨显示。

在创建图形中用到的方法有：moveTo(x,y)、lineTo(x,y)、rect(x,y,width,height)、arc(x,y,startAngle,endAngle,direction)。

moveTo()方法是将画笔移动动到指定位置；

lineTo()即画笔初始点到位置用直线连接；

canvas中还可以修改线型。lineWidth、lineCap分别设置线宽及线条端点形状；

转换函数，即改变并设置新的原点translate(x,y)。

rotate(angle)以原点为中心进行旋转；

scale(x,y)放大或者缩小画布；

save()保存画布状态；