今天写项目时,突然发现canvas的一些公式不记得了,所以整理了一番,分享给大家。
Canvas
- 标签
<canvas></canvas>
- 默认宽300,高150,不用用Css设置宽高
- 获取方法var ctx = cas.getcontext("2d"),该方法返回CanvasRenderingContext2D的类型对象,利用该方法绘图
- 基本绘图命令
- 设置开始绘图位置:ctx.moveTo(x,y);
- 设置直线到的位置:ctx.lineTo(x,y);
- 描边绘制:ctx.stroke();
- 填充绘制:ctx.fill();
- 自动闭合路径:ctx.closePath();
- 开启新的绘制:ctx.beginPath();
- 设置描边颜色:ctx.strokeStyle;
- 设置填充颜色:ctx.fillStyle;
- 保存开始设置:ctx.save();
- 重置到保存样式:ctx.restore();
- 线型相关属性
- 设置线宽:ctx.linewidth;(数字即可)
- 设置线末端类型:ctx.lineCap;('butt' 表示两端使用方形结束,'round' 表示两端使用圆角结束,'square' 表示突出的圆角结束)
- 设置相交线的拐点:ctx.lineJoin;('round' 使用圆角连接,'bevel' 使用平切连接,'miter' 使用直角转)
- 获得线段样式数组:ctx.getLineDash();
- 设置线段样式:ctx.setLineDash();(数组形式设置)
- 绘制线段偏移量:ctx.lineDashOffset;
- 矩形绘图命令
- 绘制矩形:ctx.rect;(因为还需要fill或者stroke才可以看见效果,所以直接使用下面两种)
- 绘制边框矩形:ctx.strokeRect(x,y,width,height);
- 绘制填充矩形:ctx.fillRect(x,y,width,height);
- 清除矩形区域:ctx.clearRect(x,y,width,height);
- 圆弧绘制命令
- 绘制圆弧:ctx.arc(x,y,r,startAngle,endAngle,anticlockwise);参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选
- 绘制相切弧:非重点
- 绘制文本命令
- 绘制填充文字: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)
- 绘制图片命令
- 绘制图片(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);
- 变换命令
- 平移变换:ctx.translate(x,y);(x 表示水平移动, 正数向右, 负数向左;y 表示垂直移动, 正数向下, 负数向上)
- 旋转变化:ctx.ratate(radian);(参数是弧度, 表示旋转的方式. 正数表示顺时针旋转, 负数表示逆时针旋转.)
- 缩放变化:ctx.scale(x,y);(x控制水平缩放倍率,y控制水平缩放倍率,传1不做缩放)
今天写项目时,突然发现canvas的一些公式不记得了,所以整理了一番,分享给大家。的更多相关文章
- 更改项目名或者多个项目时,发现多个"Home"匹配的Controller时,解决方法
[备份]异常信息:找到多个与名为“Home”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的 路由在搜索匹配此请求的控制器时没有指定命名空间,则会 ...
- 关于Eclipse创建Android项目时,会多出一个appcompat_v7的问题
问题描述: 使用eclipse创建一个Android项目时,发现project列表中会多创建出一个appcompat_v7项目,再创建一个Android项目时,又会再多出一个appcompat_ ...
- 【转】关于Eclipse创建Android项目时,会多出一个appcompat_v7的问题
问题描述: 使用eclipse创建一个Android项目时,发现project列表中会多创建出一个appcompat_v7项目,再创建一个Android项目时,又会再多出一个appcompat_v7_ ...
- eclipse创建项目时出现appcompat_v7包及解决办法
Android开发学习总结(三)--appcompat_v7项目说明 一.appcompat_v7项目说明 今天来说一下appcompat_v7项目的问题,使用eclipse创建Android项目时, ...
- VS生成项目时,有些文件无法复制到输出目录的解决办法
有时候,我们在生成项目时,发现有些文件如:.jpg的图片文件,无法复制到输出目录中,此时会非常纠结,反复的清理项目,重新生成,依旧不能解决此问题.后来我打开.csproj的项目工程文件时,经过对比发现 ...
- 已解决: idea创建并部署SpringMVC项目时 报错 java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
用IDEA创建并运行SpringMVC项目时,最初发现没有Servlet包,这个问题已在上篇解决,然而当我们尝试去运行此时的SpringMVC项目时,发现仍然有错误.ClassNotFoundExce ...
- 【Java EE】从零开始写项目【总结】
从零开发项目概述 最近这一直在复习数据结构和算法,也就是前面发出去的排序算法八大基础排序总结,Java实现单向链表,栈和队列就是这么简单,十道简单算法题等等... 被虐得不要不要的,即使是非常简单有时 ...
- Springboot:没有src/main/resources目录(引入图片时(或静态资源时)发现没有该目录)
今天想在Springboot项目想引进静态资源时,发现自己的项目里没有教程里面的 src/main/resources这个目录,目录如下 我的项目目录结构是这样的,但是还不是很清楚下面的那个src目录 ...
- Makefile之写demo时的通用Makefile写法
Makefile之写demo时的通用Makefile写法[日期:2013-05-22] 来源:CSDN 作者:gqb666 [字体:大 中 小] 前面的一篇文章Makefile之大型工程项目子目录M ...
随机推荐
- MacOS中使用QT开发iOS应用
因为项目合同中规定一部分业务内容要在手机端实现,包括安卓机和苹果机,因此选择了QT作为开发工具.程序在Win10和安卓系统上已经完美运行,这几天开始搭建iOS的编译和发布环境,因为以前没有使用过mac ...
- WaitType:ASYNC_NETWORK_IO
官方文档的定义,是指SQL Server 产生的结果集需要经过Network传递到Client,Network不能很快将结果集传输到Client,导致结果集仍然驻留在SQL Server的Sessio ...
- The replication agent has not logged a progress message in 10 minutes.
打开Replication Monitor,在Subscription Watch List Tab中,发现有大量的status= “Performance critical” 的黄色Warning, ...
- 神奇的CSS sprites,制作特效的新方法
本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...
- jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on
事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...
- ES6 - Note5:Promise
1.Promise介绍 Promise最早是社区提出和实现,后面ES6将其写入标准,并原生提供Promise对象,是一种异步编程的解决方案,具体的概念大家可以去查看相关的资料.传统上处理异步都是以ca ...
- 在C#中使用Spire.doc对word的操作总结
在C#中使用Spire.doc对word的操作总结 在最近的工程中我们要处理一些word文档.通过在网上的大量搜索,我发现大多数软件功能不是不完整就是有重复.极少数可以完全实现的word组件又要收费. ...
- iOS开发——高级特性&Runtime运行时特性详解
Runtime运行时特性详解 本文详细整理了 Cocoa 的 Runtime 系统的知识,它使得 Objective-C 如虎添翼,具备了灵活的动态特性,使这门古老的语言焕发生机.主要内容如下: 引言 ...
- iOS开发使用半透明模糊效果方法整理
虽然iOS很早就支持使用模糊效果对图片等进行处理,但尤其在iOS7以后,半透明模糊效果得到大范围广泛使用.包括今年最新发布的iOS8也沿袭了这一设计,甚至在OS X 10.10版Yosemite中也开 ...
- IE 11 如何设置“用户代理字符串”
"用户代理字符串"这个术语在IE11 之前被叫作“浏览器模式”(Browser Mode),在IE11下面这个特殊的选项被放在F12的“仿真”选项下面了. Figure 1通过按下 ...