canvas画图

2019-05-29 16:48:16 作者：互联网

<!DOCTYPE html>
<html>
<head>
	<title>画一个矩形</title>
	<style type="text/css">
		canvas{
			border: 1px red solid;
		}
	</style>
</head>
<body>
	<canvas height="500" width="500"></canvas>

</body>
<script type="text/javascript">
	var canvas=document.querySelector("canvas");
	var ctx=canvas.getContext('2d');
	var img=document.createElement("img");
	img.src="1.jpg";//路径
	//context.drawImage(img,x,y);
	//context.drawImage(img,x,y,width,height);
	//context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
	//img.height
	//arc(x, y, radius, startRad, endRad, anticlockwise)圆弧，开始弧度，结束弧度；
	//ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI / 2, false);
	//addEventListener
	//x=xo+Math.sin(Matht.PI/3).100//半径；
	img.onload=function(){
		ctx.drawImage(img,100,100,300,300)
	}
	//解决失真的东西；
	//对应的比例；
	//ctx.arc()
	//ctx.translate()坐标原点平移；整个画布的原点平移；moveTo()//笔的落出；
	//ctx.scale()//缩放；水平，纵向位置；
	//1.在线播放器，在线音乐；
	//2.联系canvas中的api熟悉；
</script>
</html>

标签：canvas,drawImage,img,ctx,画图,arc,var
来源： https://blog.csdn.net/weixin_44346827/article/details/90673693