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. smali语法(二)

    一.smali的包中信息 .class public Lcom/aaaaa; .super Lcom/bbbbb; .source "ccccc.java" 1.它是com.aaa ...

  2. [flask实践] 解决mysql数据库不支持中文的问题

    接上一篇文章,在解决了mysql+flask环境配置问题之后,往数据库存中文字符串会报1366错误,提示不正确的字符.继而发现默认的mysql采用了Latin1字符集,这种编码是不支持中文的. 如果想 ...

  3. Windos系统git提交

    一.$ git status   //查看当前项目下所有文的状态,如果第一次,你会发现都红颜色的,因为它还没有交给git/github管理. 二.$ git add .   //(.)点表示当前目录下 ...

  4. PHP就业前景好不好一看便知,转行选择需谨慎!

    随着互联网行业迎来新一波的热潮,更多的年轻人选择软件行业发展.由于互联网本身快速发展.不断创新的特点,决定了只有以快开发速度和低成本,才能赢得胜利,才能始终保持网站的领先性和吸引更多的网民. 互联网的 ...

  5. linux配置分步安装lnmp环境----ghj

    前台:nignx 后台:apache[linux命令]用户文件目录启动定时任务:[开启RZ命令]yum -y install lrzsz [防火墙]防火墙配置文件: /etc/sysconfig/ip ...

  6. appium+Linux环境安装配置

      背景:想要在Jenkins上跑appium的自动化测试,所以想要在Jenkins服务器(Linux远程)上安装appium服务,故而研究了一下appium+Linux下安装.虽然有无数的前辈踩过坑 ...

  7. SQL图像查看器 —— SQL Image Viewer

    有时候往数据库里面存储了一些图片,但是如果不写读取程序的话,就不知道存储的对不对. 或者查看SQL数据库里面二进制看不懂,这个看图片很直观的. 就需要SQL Image Viewer这么一个

  8. Pythonh中的zip()与*zip()函数详解

    前言 实验环境: Python 3.6: 示例代码地址:下载示例: 本文中元素是指列表.元组.字典等集合类数据类型中的下一级项目(可能是单个元素或嵌套列表). zip(*iterables)函数详解 ...

  9. python3 三级菜单-基础版

    # -*- coding:utf-8 -*- data = { "北京":{ "东城区":{ "安定门":["国子监", ...

  10. 使用背景图修改radio、checkbox样式

    如果觉得设置样式太麻烦,或者页面上选中的样式太复杂,也可以用背景图去修改样式<div class=""> <label><input type=&qu ...