文档章节

Canvas

MeggieWang
 MeggieWang
发布于 2017/06/28 22:31
字数 1342
阅读 5
收藏 0

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()。

© 著作权归作者所有

上一篇: Canvas库
下一篇: new
MeggieWang
粉丝 1
博文 6
码字总数 4081
作品 0
程序员
私信 提问

暂无文章

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部