canvas学习

最新推荐文章于 2023-12-12 14:44:10 发布

ruanwenjun_csdn

最新推荐文章于 2023-12-12 14:44:10 发布

阅读量181

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/ruanwenjun_csdn/article/details/78431773

版权

javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.获得canvas，然后就可以利用context来绘制。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<canvas id ="canvas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var a = document.getElementById("canvas");
		var context = a.getContex("2d");
	</script>
</body>
</html>

2.一些绘制的方法

context.fillStyle = "#000;                  //设置颜色填充
context.strokeStyle = "#000";				//设置绘制的颜色

context.rect(x,y,width,height);             //一个矩形
context.fillRect(x,y,width,height)          //绘制颜色填充的矩形 
context.strokeRect(x,y,width,height)        //绘制矩形无填充 
context.clearRect(x,y,width,height)         //清空矩形内的东西

context.arc(x,y,r,sAngle,eAngle,counterclockwise);           //绘制圆弧,(x,y)是圆心坐标，r是半径，sAngle,eAngle是起始角度和终止角度（单位为弧度）
															//counterclockwise是可选参数顺时针还是逆时针

context.ispointInpath(x,y);                                //如果点(x,y)位于当前路径中则返回true，否则返回false;

context.scale(scalewidth,scaleheight);					   //放大或缩小当前的绘图，如果进行了缩放或放大，那么之后的绘图放大或缩放会参照上一次的
context.rotate(angle);                                     //旋转当前的绘图，angle单位为角度
context.transform(a,b,c,d,e,f)                             //水平缩放倾斜移动当前绘图

context.translate(x,y);                                    //将(x,y)设置为（0，0），即之后的绘图参照从（x,y）

context.beginPath();                        //起始一条路径
context.moveTo(x,y);                        //将点移动到(x,y)
context.lineTo(x,y);                        //创建一个新的点，然后创建从该点到画布中最后一个点的线条（但是并不会画出来，需要stroke)
context.closePath();                        //创建从当前点到起始点的路径（但是并不会画出来，需要stroke)

context.clip();                             //剪切一个区域，然后之后的绘制都会在该区域中进行

context.fill();                             //填充当前 
context.stroke();                           //绘制当前 

context.font = "";                          //设置或返回文本内容的属性
context.textAligh = "";                     //设置或返回文本的对其方式
context.fillText(text,x,y);                  //在（x,y）处绘制填充文本text
context.strokeText(text,x,y);               //无填充

context.save();                             //保存当前的画布的一些颜色等的设置

context.restore();                           //回到当前画布保存的一些颜色等的设置

3.绘制图片

var a = document.getElementById("canvas");
var context = a.getContext("2d");
var image = new Image();
image.onload = function(){
	console.log("Loaded image");
	context.drawImage(image,0,0);
	}
image.src ="123.jpg";             //设置的image的路径，与html文件在同一个文件夹

context.drawImage(img,x,y);                 //在（x,y）处绘制图片
context.drawImage(img,x,y,weigh,height)      //绘制的图片的高和宽