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的更多相关文章

  1. canvas学习之API整理笔记(二)

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  2. canvas学习之API整理笔记(一)

    其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...

  3. Html5 学习系列(五)Canvas绘图API快速入门(1)

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  4. Canvas学习:封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  5. Html5 学习系列(五)Canvas绘图API快速入门(2)

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  6. canvas学习(一)

    Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...

  7. 引言:Canvas绘图API快速入门

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  8. canvas学习总结六:绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

  9. canvas学习和滤镜实现

    最近学习了 HTML5 中的重头戏--canvas.利用 canvas,前端人员可以很轻松地.进行图像处理.其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码: 实现去色滤镜 实现负色 ...

随机推荐

  1. mysql的复杂查询,连接数据库

    1.MySQL的工具:Navicat 优点:方便2.数据库的导入 mysqldump -u用户名 -p密码 数据库名称 > 导出文集路径 #结构+数据 mysqldump -u用户名 -p密码 ...

  2. HDU 1317XYZZY spfa+判断正环+链式前向星(感觉不对,但能A)

    XYZZY Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  3. Echarts后台封装option对象

    该方法返回的keyword指向了前台负责图表显示的jsp页面 public String keyword() { if(this.dateNum == null || this.dateNum.equ ...

  4. mysql索引优化面试题

    曾经偷偷的面试了两个单位,都提到了Mysql的优化问题,所以以后要多多学习数据库的优化知识了.建设数据库的优化大概主要就是索引的优化了吧,因为我们不可能修改数据结构的情况下,提高数据库的查询效率似乎也 ...

  5. 如何在HTTP头中隐藏PHP版本号

    PHP 配置默认允许服务器在 HTTP 响应头 X-Powered-By 中显示安装在服务器上的 PHP 版本.出于服务器安全原因(虽然不是主要的要担心的威胁),建议你禁用或隐藏此信息,避免那些针对你 ...

  6. 常量和静态变量会先载入内存后在进行执行php代码

    static $test=1;//在php执行前就已经写入内存$test++;var_dump($test);static $test=10;//在php执行前就已经写入内存var_dump($tes ...

  7. 三种方法实现PCA算法(Python)

    主成分分析,即Principal Component Analysis(PCA),是多元统计中的重要内容,也广泛应用于机器学习和其它领域.它的主要作用是对高维数据进行降维.PCA把原先的n个特征用数目 ...

  8. 运行期以索引获取tuple元素-C++11之1

    //运行期以索引获取tuple元素-C++11之1 //需支持C++11及以上标准的编译器,VS2017 15.5.x.CodeBlocks 16.01 gcc 7.2 //参见<深入应用C++ ...

  9. 免费靠谱的 Let’s Encrypt 免费 https 证书申请全过程

    申请 Let’s Encrypt证书的原因: 现在阿里云等都有免费的 https 证书,为什么还要申请这个呢(估计也是因为阿里云这些有免费证书的原因,所以 Let’s Encrypt 知道的人其实并不 ...

  10. 游戏服务端中使用Servlet和Java注解的一个好设计

    SNS类游戏基本都是使用HTTP短连接,用Java来开发服务端时能够使用Servlet+Tomcat非常轻松的架构起服务端来.在这里介绍一种使用Servlet比較好的一种设计,我也见过非常多基于HTT ...