canvas学习api
1、canvas.getContext():获取渲染上下文和绘画功能;
一、绘制矩形
2、ctx.fillRect(x,y,width,height):绘制矩形;
3、ctx.strokeRect(x,y,width,height):绘制矩形边框;
4、ctx.clearRect(x,y,width,height):清除矩形;
二、绘制路径
5、ctx.beginPath():新建路径开始命令;
6、ctx.closePath():路径闭合之后绘制命令重新回到上下文;
7、stroke():通过线条来绘制图形轮廓;
8、fill():填充路径内容途径生成实心图形;
三、移动笔触
moveTo(x,y);
四、实线
lineTo(x,y):绘制一条从当前位置到x,y位置的实线;
五、圆弧
arc(x,y,radius,startAngle,endAngle,方向(默认顺时针));
六、贝塞尔以及二次贝塞尔
quadraticCurveTo(cp1x,cp1y,x,y):cp1x,cp1y是贝塞尔曲线的控制点,x,y是结束点;
二次贝塞尔: bezierCruveTo(cp1x,cp1y,cp2x,cp2y,x,y)多了两个控制点;
七、Path2D(不太详细)
八、颜色填充
fillStyle = color:设置图形的填充颜色;
strokeStyle = color:设置图形轮廓的颜色;
九、设置透明度
ctx.globalAlpha = (0~1);
十、线型 line styles
1、lineWidth = width;设置线的宽度(注意:线的宽度是从宽度中心向两边各绘制宽度的一般,因此要准确落在边缘需要减半计算);
2、 lineCap = type:设置线条末端样式,type有 butt,round,square,默认是butt,
3、 lineJoin,设置线条交接处样式,值 有round,bevel,miter;默认是miter;
4.miterLimit,设置外延交点和连接点的最大距离,超出最大距离则变成bevel;
5、setLineDash和setLineOffset设置虚线样式;
十一、渐变 Gradients
1、线性渐变 createLinearGradient(x1,y1,x2,y2),参数规定起始位置和结束位置,即线性方向;
2、径向渐变 createRadialGradient(x1,y1,r1,x2,y2,r2);
3、颜色值设定 addColorStop(position,color);position是渐变位置(0~1),color是颜色;
注:gradient对象其实也是一种颜色,要用fillStyle引用;
十二、状态保存与恢复
save()和restore();
十三、移动原点
translate(x)
canvas学习api的更多相关文章
- canvas学习之API整理笔记(二)
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
- canvas学习之API整理笔记(一)
其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...
- Html5 学习系列(五)Canvas绘图API快速入门(1)
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- Html5 学习系列(五)Canvas绘图API快速入门(2)
Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...
- canvas学习(一)
Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...
- 引言:Canvas绘图API快速入门
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
- canvas学习总结六:绘制矩形
在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...
- canvas学习和滤镜实现
最近学习了 HTML5 中的重头戏--canvas.利用 canvas,前端人员可以很轻松地.进行图像处理.其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码: 实现去色滤镜 实现负色 ...
随机推荐
- mysql的复杂查询,连接数据库
1.MySQL的工具:Navicat 优点:方便2.数据库的导入 mysqldump -u用户名 -p密码 数据库名称 > 导出文集路径 #结构+数据 mysqldump -u用户名 -p密码 ...
- HDU 1317XYZZY spfa+判断正环+链式前向星(感觉不对,但能A)
XYZZY Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Subm ...
- Echarts后台封装option对象
该方法返回的keyword指向了前台负责图表显示的jsp页面 public String keyword() { if(this.dateNum == null || this.dateNum.equ ...
- mysql索引优化面试题
曾经偷偷的面试了两个单位,都提到了Mysql的优化问题,所以以后要多多学习数据库的优化知识了.建设数据库的优化大概主要就是索引的优化了吧,因为我们不可能修改数据结构的情况下,提高数据库的查询效率似乎也 ...
- 如何在HTTP头中隐藏PHP版本号
PHP 配置默认允许服务器在 HTTP 响应头 X-Powered-By 中显示安装在服务器上的 PHP 版本.出于服务器安全原因(虽然不是主要的要担心的威胁),建议你禁用或隐藏此信息,避免那些针对你 ...
- 常量和静态变量会先载入内存后在进行执行php代码
static $test=1;//在php执行前就已经写入内存$test++;var_dump($test);static $test=10;//在php执行前就已经写入内存var_dump($tes ...
- 三种方法实现PCA算法(Python)
主成分分析,即Principal Component Analysis(PCA),是多元统计中的重要内容,也广泛应用于机器学习和其它领域.它的主要作用是对高维数据进行降维.PCA把原先的n个特征用数目 ...
- 运行期以索引获取tuple元素-C++11之1
//运行期以索引获取tuple元素-C++11之1 //需支持C++11及以上标准的编译器,VS2017 15.5.x.CodeBlocks 16.01 gcc 7.2 //参见<深入应用C++ ...
- 免费靠谱的 Let’s Encrypt 免费 https 证书申请全过程
申请 Let’s Encrypt证书的原因: 现在阿里云等都有免费的 https 证书,为什么还要申请这个呢(估计也是因为阿里云这些有免费证书的原因,所以 Let’s Encrypt 知道的人其实并不 ...
- 游戏服务端中使用Servlet和Java注解的一个好设计
SNS类游戏基本都是使用HTTP短连接,用Java来开发服务端时能够使用Servlet+Tomcat非常轻松的架构起服务端来.在这里介绍一种使用Servlet比較好的一种设计,我也见过非常多基于HTT ...