Canvas

最新推荐文章于 2021-01-14 17:07:15 发布

cifu7520

最新推荐文章于 2021-01-14 17:07:15 发布

阅读量93

点赞数

原文链接：https://my.oschina.net/u/3502371/blog/1058178

版权

canvas是一个html标签，但是给js提供了接口，通过js可以在操作canvas实现一些效果。兼容性较差，IE9及以上兼容。

现在canvas主要应用于游戏、报表、地图、制作炫酷效果、banner、图形编辑器、模拟器等。

canvas元素的属性：width、height。

方法：getContext() 获取绘图环境 Context对象是js操作canvas的接口。参数：2d、webgl

书写格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
    <canvas id="myCanvas">您的浏览器不支持canvas，请升级浏览器。</canvas><!-- 默认 width:300, height:150 -->
    <script>
	//获取canvas元素(画布)
	var canvas = document.querySelector("#myCanvas");
	//获取画布环境
	var ctx = canvas.getContext("2d");
	//设置宽、高(不能在style标签中设置)
	ctx.width = 500;
	ctx.height = 500;

	//绘制路径
	ctx.beginPath(); //路径开始，开启新的路径(状态) 并且结束前面的路径
  	ctx.moveTo(x,y); //起始点坐标
  	ctx.lineTo(x,y);
  	ctx.closePath(); //路径闭合，结束当前路径 并且使当前路径闭合
	//描边路径
  	ctx.stroke();
  	ctx.strokeStyle = "red"; //设置描边颜色
  	ctx.lineWidth = 1; //设置描边线条宽度，默认1
	//填充路径
  	ctx.fill();
  	ctx.fillStyle = "red"; //设置填充颜色

	//绘制矩形
  	ctx.rect(x,y,w,h);
  	//快速矩形工具
  	ctx.strokeRect(x,y,w,h); //绘制描边矩形
  	ctx.fillRect(x,y,w,h); //绘制填充矩形
	//清除矩形
  	ctx.clearRect(x,y,w,h);
	//清除画布
  	canvas.width = canvas.width;

	//绘制圆弧
 	ctx.arc(x,y,r,startAngle,endAngle,true|false); //最后一个参数表示逆时针或顺时针，可选。默认false顺时针

	//绘制文字
  	ctx.font = "(加粗 倾斜) 字体大小 字体";
	ctx.textAlign = "start"; //文字水平对齐方式。参数：start、end、left、right、center，默认start
	ctx.textBaseLine = "alphabetic"; //文字垂直对齐方式。参数：alphabetic、top、bottom、middle，默认alphabetic
	ctx.fillText(text,x,y); //绘制填充文字
	ctx.strokeText(text,x,y); //绘制描边文字
	ctx.measureText(text); //获取文本在画布中所占的宽度

	//绘制图片
	var img = document.createElement('img');//创建img对象  var img = new Image();不推荐使用
	ctx.drawImage(img,x,y);//基本绘图
	ctx.drawImage(img,x,y,w,h);//绘图并设置大小
	ctx.drawImage(img,sx,sy,sw,sh,x,t,w,h);//裁剪图片(先写原图的坐标大小，再写画布的坐标大小)

	//绘制阴影
	ctx.fillStyle = 'red';
	ctx.shadowColor = 'pink'; //设置阴影的颜色
	ctx.shadowBlur = 5; //设置阴影的模糊程度
	ctx.shadowOffsetX = 5; //设置阴影的水平偏移量
	ctx.shadowOffsetY = 5; //设置阴影的垂直偏移量
	ctx.fillRect(x,y,w,h);
	ctx.strokeRect(x,y,w,h);

	//绘制线性渐变(相对于绘图环境)
	var grd = ctx.createLinearGradient(x0,y0,x1,y1); //参数：x0,y0起始位置 x1,y1结束位置
	grd.addColorStop(number,color); //number 0-1之间
	//把渐变填充到矩形
	ctx.fillStyle = grd;
	ctx.fillRect(x,y,w,h);

	//绘制径向渐变(相对于绘图环境)
	var grd = ctx.createRadialGradient(x0,y0,r0,x1,y1,r1); //参数：x0,y0开始圆的起始位置 r0开始圆的半径 x1,y1结束圆的位置 r1结束圆的半径
	grd.addColorStop(0,'red');
	//把渐变填充到矩形
	ctx.fillStyle = grd;
	ctx.fillRect(x,y,w,h);

	//绘制背景图
	//创建图片元素
	var img = document.createElement('img');
	img.addEventListener('load',function() {//监听图片加载完毕
	    //绘制背景图片
	    var pat = ctx.createPattern(img,repeat);//repeat参数:repeat(默认) 水平和垂直方向重复;repeat-x 水平方向重复;repeat-y 垂直方向重复;no-repeat 不重复。
	    //填充矩形
	    ctx.fillStyle = pat;
	    ctx.fillRect(x,y,w,h);
	    ctx.strokeRect(x,y,w,h);
	})

	//变换--缩放(相对于绘图环境 先变换,后绘图)
	ctx.scale(w,h);

	//变换--位移(相对于绘图环境 先变换,后绘图)
	ctx.translate(w,h);

	//变换--旋转(相对于绘图环境 先变换,后绘图)
	ctx.rotate(angle);

	//绘图环境的保存和释放
	ctx.save(); //保存当前的绘图环境
	ctx.restore(); //释放前面保存的绘图环境

	//设置不透明度(相对于绘图环境)
	ctx.globalAlpha = .5; //参数：0-1之间小数

	//裁剪画布(相对于绘图环境)
	ctx.rect(150,150,200,300); //先定义一个路径
	ctx.stroke();
	ctx.clip(); //沿路径包围的部分裁剪

	//画布保存为Base64编码
	var img = document.createElement('img');
	img.src = canvas.toDataURL('image/jpeg',1); //参数一：type，图片的mime类型；参数二：压缩比(0-1)，1为无损压缩
	document.body.appendChild(img);

	//画布渲染画布--canvas优化，尽量减少渲染次数
	canvas.style.diaplay = 'none'; //将内容绘制到画布中，设置样式为隐藏
	ctx1.drawImage(canvas,0,0); //把隐藏的canvas渲染到另一个显示的canvas上  参数：渲染的canvas，x，y

	//线条样式
	ctx.lineCap = 'butt'; //两端样式 值：butt(默认)|round圆形|square正方形
	ctx.lineJoin = 'miter'; //两线相交样式 值：miter(默认)尖角|round圆角|bevel斜角
	ctx.miterLimit = '10'; //设置尖角长度(配合lineJoin='miter'时才有效),默认值10

	//贝塞尔曲线
	ctx.moveTo(x,y); //确定起始点
	ctx.quadraticCurveTo(cpx,cpy,x,y); //二次方曲线    参数：控制点x坐标，控制点y坐标，结束点x坐标，结束点y坐标
	ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); //三次方曲线    参数：控制点一x坐标，控制点一y坐标，控制点二x坐标，控制点二y坐标，结束点x坐标，结束点y坐标

	//切线画弧
	ctx.arcTo(x1,y1,x2,y2,r); //端点一x坐标，端点一y坐标，端点二x坐标，端点二y坐标，半径

	//判断点是否在路径中  返回true | false
	ctx.isPointInPath(x,y);
    </script>
</body>
</html>

注：相对于绘图环境进行设置的渐变、变换、不透明度、裁剪等，都需要先设置，后绘图。

快速矩形工具strokeRect()和fillRect()、绘制文字strokeText()和fillText()不是路径，不需要beginPath()和closePath()。

转载于:https://my.oschina.net/u/3502371/blog/1058178