前端基础笔记-canvas(一)

canvas

1. 实际应用:在小程序中制造分享海报的时候需要用到canvas自己画图，想到做app也需要，所以学了一下js的canvas

<div>
			<canvas id="one" width="600" height="600"></canvas>
			<img src="one/3.jpg" id="two">
		</div>

function draw(){
				var canvas=document.getElementById('one');
				if(!canvas.getContext) return;
				var can=canvas.getContext('2d');
				// canvas对于每个图形的起点都是0,0,即使指定起点,也是相对位置,所以图形都需要指定相对坐标
				can.beginPath(); //每创建一个图形都要开始一个路径
				// can.arc(100,100,50,0,Math.PI/2,false);
				can.strokeRect(50,50,50,50);//该方法可以绘制矩形,不需要使用stroke
				can.fillStyle='rgb(153,153,153)'
				
				can.beginPath();
				can.font='20px sans-serif';//字体样式要设置在文本之前,否则无效
				can.strokeText('我在下遗憾',50,150);//绘制的是文本边框
				can.fillText('我在下遗憾',50,200);//绘制文本
				// can.closePath();//从起始点到当前点画线,有点多此一举!
				// can.stroke();//通过线条来绘制图形轮廓
				
				can.beginPath();
				var img=document.getElementById('two');
				//必须在图片加载完再绘制图片,否则会失效
				img.onload=function(){
					can.drawImage(img,50,250,100,100);
				}
				
				can.beginPath();
				var img2=new Image();//可以自己创建一个图片元素
				//指定一个src属性
				img2.src='https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture'
				img2.onload=()=>{
					can.drawImage(img2,50,400,100,100)
				}
			}
			draw()

• 弧度和度数换算:1度=PI/180*弧度，需要注意的是cancas中绘制图形使用的是弧度
• 强烈推荐