Canvas

  1. 标签<canvas></canvas>
  2. 默认宽300,高150,不用用Css设置宽高
  3. 获取方法var ctx = cas.getcontext("2d"),该方法返回CanvasRenderingContext2D的类型对象,利用该方法绘图
  4. 基本绘图命令
    • 设置开始绘图位置:ctx.moveTo(x,y);
    • 设置直线到的位置:ctx.lineTo(x,y);
    • 描边绘制:ctx.stroke();
    • 填充绘制:ctx.fill();
    • 自动闭合路径:ctx.closePath();
    • 开启新的绘制:ctx.beginPath();
    • 设置描边颜色:ctx.strokeStyle;
    • 设置填充颜色:ctx.fillStyle;
    • 保存开始设置:ctx.save();
    • 重置到保存样式:ctx.restore();
  5. 线型相关属性
    • 设置线宽:ctx.linewidth;(数字即可)
    • 设置线末端类型:ctx.lineCap;('butt' 表示两端使用方形结束,'round' 表示两端使用圆角结束,'square' 表示突出的圆角结束)
    • 设置相交线的拐点:ctx.lineJoin;('round' 使用圆角连接,'bevel' 使用平切连接,'miter' 使用直角转)
    • 获得线段样式数组:ctx.getLineDash();
    • 设置线段样式:ctx.setLineDash();(数组形式设置)
    • 绘制线段偏移量:ctx.lineDashOffset;
  6. 矩形绘图命令
    • 绘制矩形:ctx.rect;(因为还需要fill或者stroke才可以看见效果,所以直接使用下面两种)
    • 绘制边框矩形:ctx.strokeRect(x,y,width,height);
    • 绘制填充矩形:ctx.fillRect(x,y,width,height);
    • 清除矩形区域:ctx.clearRect(x,y,width,height);
  7. 圆弧绘制命令
    • 绘制圆弧:ctx.arc(x,y,r,startAngle,endAngle,anticlockwise);参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选
    • 绘制相切弧:非重点
  8. 绘制文本命令
    • 绘制填充文字:ctx.fillText(text,x,y);
    • 绘制空心文字:ctx.strokeText(text,x,y);
    • 设置文本宽度:ctx.measureText();(非重点)
    • 设置字体样式:ctx.font;
    • 设置字体水平位置:ctx.textAlign;(start(默认), end, left, right, center)
    • 设置字体垂直位置:ctx.textBaseline;(top, middle, bottom, hanging, alphabetic, ideographic)
  9. 绘制图片命令
    • 绘制图片(3参数):ctx.drawImage(img,x,y);
    • 绘制图片(5参数):ctx.drawImage(img,x,y,width,height);
    • 绘制图片(9参数):ctx.drawImage(img,casx,casy,caswidth,casheight,x,y,width,height);
  10. 变换命令
    • 平移变换:ctx.translate(x,y);(x 表示水平移动, 正数向右, 负数向左;y 表示垂直移动, 正数向下, 负数向上)
    • 旋转变化:ctx.ratate(radian);(参数是弧度, 表示旋转的方式. 正数表示顺时针旋转, 负数表示逆时针旋转.)
    • 缩放变化:ctx.scale(x,y);(x控制水平缩放倍率,y控制水平缩放倍率,传1不做缩放)

今天写项目时,突然发现canvas的一些公式不记得了,所以整理了一番,分享给大家。的更多相关文章

  1. 更改项目名或者多个项目时,发现多个"Home"匹配的Controller时,解决方法

    [备份]异常信息:找到多个与名为“Home”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的 路由在搜索匹配此请求的控制器时没有指定命名空间,则会 ...

  2. 关于Eclipse创建Android项目时,会多出一个appcompat_v7的问题

     问题描述: 使用eclipse创建一个Android项目时,发现project列表中会多创建出一个appcompat_v7项目,再创建一个Android项目时,又会再多出一个appcompat_ ...

  3. 【转】关于Eclipse创建Android项目时,会多出一个appcompat_v7的问题

    问题描述: 使用eclipse创建一个Android项目时,发现project列表中会多创建出一个appcompat_v7项目,再创建一个Android项目时,又会再多出一个appcompat_v7_ ...

  4. eclipse创建项目时出现appcompat_v7包及解决办法

    Android开发学习总结(三)--appcompat_v7项目说明 一.appcompat_v7项目说明 今天来说一下appcompat_v7项目的问题,使用eclipse创建Android项目时, ...

  5. VS生成项目时,有些文件无法复制到输出目录的解决办法

    有时候,我们在生成项目时,发现有些文件如:.jpg的图片文件,无法复制到输出目录中,此时会非常纠结,反复的清理项目,重新生成,依旧不能解决此问题.后来我打开.csproj的项目工程文件时,经过对比发现 ...

  6. 已解决: idea创建并部署SpringMVC项目时 报错 java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener

    用IDEA创建并运行SpringMVC项目时,最初发现没有Servlet包,这个问题已在上篇解决,然而当我们尝试去运行此时的SpringMVC项目时,发现仍然有错误.ClassNotFoundExce ...

  7. 【Java EE】从零开始写项目【总结】

    从零开发项目概述 最近这一直在复习数据结构和算法,也就是前面发出去的排序算法八大基础排序总结,Java实现单向链表,栈和队列就是这么简单,十道简单算法题等等... 被虐得不要不要的,即使是非常简单有时 ...

  8. Springboot:没有src/main/resources目录(引入图片时(或静态资源时)发现没有该目录)

    今天想在Springboot项目想引进静态资源时,发现自己的项目里没有教程里面的 src/main/resources这个目录,目录如下 我的项目目录结构是这样的,但是还不是很清楚下面的那个src目录 ...

  9. Makefile之写demo时的通用Makefile写法

    Makefile之写demo时的通用Makefile写法[日期:2013-05-22] 来源:CSDN  作者:gqb666 [字体:大 中 小] 前面的一篇文章Makefile之大型工程项目子目录M ...

随机推荐

  1. MacOS中使用QT开发iOS应用

    因为项目合同中规定一部分业务内容要在手机端实现,包括安卓机和苹果机,因此选择了QT作为开发工具.程序在Win10和安卓系统上已经完美运行,这几天开始搭建iOS的编译和发布环境,因为以前没有使用过mac ...

  2. WaitType:ASYNC_NETWORK_IO

    官方文档的定义,是指SQL Server 产生的结果集需要经过Network传递到Client,Network不能很快将结果集传输到Client,导致结果集仍然驻留在SQL Server的Sessio ...

  3. The replication agent has not logged a progress message in 10 minutes.

    打开Replication Monitor,在Subscription Watch List Tab中,发现有大量的status= “Performance critical” 的黄色Warning, ...

  4. 神奇的CSS sprites,制作特效的新方法

    本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...

  5. jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

  6. ES6 - Note5:Promise

    1.Promise介绍 Promise最早是社区提出和实现,后面ES6将其写入标准,并原生提供Promise对象,是一种异步编程的解决方案,具体的概念大家可以去查看相关的资料.传统上处理异步都是以ca ...

  7. 在C#中使用Spire.doc对word的操作总结

    在C#中使用Spire.doc对word的操作总结 在最近的工程中我们要处理一些word文档.通过在网上的大量搜索,我发现大多数软件功能不是不完整就是有重复.极少数可以完全实现的word组件又要收费. ...

  8. iOS开发——高级特性&Runtime运行时特性详解

    Runtime运行时特性详解 本文详细整理了 Cocoa 的 Runtime 系统的知识,它使得 Objective-C 如虎添翼,具备了灵活的动态特性,使这门古老的语言焕发生机.主要内容如下: 引言 ...

  9. iOS开发使用半透明模糊效果方法整理

    虽然iOS很早就支持使用模糊效果对图片等进行处理,但尤其在iOS7以后,半透明模糊效果得到大范围广泛使用.包括今年最新发布的iOS8也沿袭了这一设计,甚至在OS X 10.10版Yosemite中也开 ...

  10. IE 11 如何设置“用户代理字符串”

    "用户代理字符串"这个术语在IE11 之前被叫作“浏览器模式”(Browser Mode),在IE11下面这个特殊的选项被放在F12的“仿真”选项下面了. Figure 1通过按下 ...