七分之二十四
七分之二十四

03-Canvas

Canvas开篇

  • Canvas是H5新增的一个标签,我们可以通过JS在这个标签上绘制各种图案
  • Canvas拥有多种绘制路径,矩形,圆形,字符以及图片的方法
  • Canvas基本使用
    • 在body中创建一个canvas标签
    • 通过js代码拿到canvas标签
    • 从canvas标签中获取到绘图工具
    • 通过绘图工具在Canvas上绘制图形
      • 设置路径的起点 xxx.moveTo(x,y);
      • 设置路径的终点 xxx.lineTo(x,y);
    • 告诉canvas将这些点连接起来 xxx.stroke();
  • Canvas注意点
    • canvas有默认的宽度和高度: 默认宽度300px,高150px
    • 能通过CSS设置canvas的宽高: 通过CSS设置canvas宽高会在默认宽高的基础上拉伸,如果需要设置canvas宽高通过元素行内属性width和height设置
    • 线条默认宽度和颜色: 通过canvas绘制的线条默认宽度是1px,颜色是纯黑色,但是由于默认情况下canvas会将线条的中心点和像素的底部对齐,,所以会导致显示效果是2px和非纯黑色的问题

Canvas线条属性

  • lineWidth: 线条宽度
  • strokeStyle: 线条颜色
  • lineCap: 线末端类型: butt(默认),round,square

绘制多根线条

  • 如果是同一个路径,那么路径样式会被重用(第二次绘制会复用第一次的样式)
  • 如果是同一个路径,那么后设置的路径样式会覆盖先设置的路径样式
  • 如何给每根线条单独设置路径样式:每根线条都开启一个新的路径,然后设置新的样式即可

绘制简单图形

  • 默认情况下不会自动从最后一个点连接到起点
  • 如果通过lineTo来闭合图形,那么是不能很好的闭合
  • closePath 自动创建从当前点回到起始点的路径
  • lineJoin 设置相交线的拐点样式 miter(默认),round,bevel

填充图形(fill)

  • 对于同一路径,在填充的时候会遵循非零环绕规则
  • 从当前的区域拉出一条直线,遇到顺时针相交的线+1,遇到逆时针相交的线就-1
  • 最终计算的结果如果是0就不填充,如果不是0就填充

绘制虚线

  • setLineDash 用数组来描述你的排序方式的
  • getLineDash 获取虚线的排序方式,获取的是不重复的那一段的排序方式
  • lineDashOffset 设置虚线的偏移位

绘制矩形

  • fillRect(填充矩形)
  • clearRect(清除指定范围矩形)
  • strokeRect(绘制矩形)
    • 第一个参数:x轴的位置
    • 第二个参数:y轴的位置
    • 第三个参数:矩形的宽度
    • 第四个参数:矩形的高度

Canvas渐变色

  • 和普通的标签一样我们也可以给填充的图形设置线性渐变和径向渐变的背景颜色
  • 设置图形渐变背景颜色步骤
    • 通过绘图工具创建渐变背景颜色
    • 指定渐变的范围
    • 将渐变背景颜色设置给对应的图形

绘制圆弧

  • content.arc(x,y,radius,startAngle,endAngle,Boolean);
  • x,y: 确定圆心
  • radius: 确定半径
  • startAngle: 确定开始的弧度
  • endAngle: 确定结束的弧度
  • Boolean: 默认是false,false就是顺时针绘制,true就是逆时针绘制

绘制文字

  • strokeText绘制的文字是空心的,fillText绘制的文字是填充了的
    • 在绘制文字的时候,是以文字的左下角作为参考点进行绘制
  • 通过font属性可以设置文字的大小和样式
  • 通过textBaseline属性可以设置文字垂直方向的对齐方式
    • 在对齐的时候是以绘制文字的y作为参考点进行对齐的
  • 通过textAlign属性可以设置文字水平方向的对齐方式
    • 在对齐的时候是以绘制文字的x作为参考点进行对齐的

绘制图片

  • content.drawImage();
  • 如果只有三个参数
    • 第一参数是需要绘制的图片
    • 后面两个参数是指定图片从什么位置开始绘制
  • 如果只有五个参数
    • 第一参数是需要绘制的图片
    • 后面两个参数是指定图片从什么位置开始绘制
    • 最后的两个参数是指定图片需要拉伸到多大
  • 如果有九个参数
    • 第一参数是需要绘制的图片
    • 最后的两个参数是指定图片需要拉伸到多大
    • 第6~7个参数是指定图片从什么位置开始绘制
    • 第2~3个参数指定图片上定位的位置
    • 第4~5个参数指定从定位的位置开始截取多大的图片

Canvas形变属性

  • content.translate(x,y); 平移
  • content.rotate(); 旋转
  • content.scale(); 缩放
  • 在canvas中所有的形变属性操作的都是坐标系,不是图形

Canvas图形交互

  • 因为整个canvas是一个标签,所以只能通过监听鼠标在canvas上的位置来判断是否需要处理对应的图形
  • isPointInPath方法如果开启了一个新的路径,那么判断的就是点是否在新的路径的图形中
  • 也可以通过第三方框架来解决交互问题,诸如:zrender.js / Knova.js / three.js / egret.js / pixi.js等等

你可能感兴趣的:(03-Canvas)

  • 03-Canvas 七分之二十四
    Canvas开篇Canvas是H5新增的一个标签,我们可以通过JS在这个标签上绘制各种图案Canvas拥有多种绘制路径,矩形,圆形,字符以及图片的方法Canvas基本使用在body中创建一个canvas标签通过js代码拿到canvas标签从canvas标签中获取到绘图工具通过绘图工具在Canvas上绘制图形设置路径的起点xxx.moveTo(x,y);设置路径的终点xxx.lineTo(x,y);
  • 关于旗正规则引擎规则中的上传和下载问题 何必如此 文件下载压缩jsp文件上传
    文件的上传下载都是数据流的输入输出，大致流程都是一样的。 一、文件打包下载 1.文件写入压缩包 string mainPath="D:\upload\";     下载路径 string tmpfileName=jar.zip;        &n
  • 【Spark九十九】Spark Streaming的batch interval时间内的数据流转源码分析 bit1129 Stream
      以如下代码为例（SocketInputDStream）： Spark Streaming从Socket读取数据的代码是在SocketReceiver的receive方法中，撇开异常情况不谈(Receiver有重连机制，restart方法，默认情况下在Receiver挂了之后，间隔两秒钟重新建立Socket连接)，读取到的数据通过调用store(textRead)方法进行存储。数据
  • spark master web ui 端口8080被占用解决方法 daizj 8080端口占用sparkmaster web ui
    spark master web ui 默认端口为8080，当系统有其它程序也在使用该接口时，启动master时也不会报错，spark自己会改用其它端口，自动端口号加1，但为了可以控制到指定的端口，我们可以自行设置，修改方法：   1、cd SPARK_HOME/sbin   2、vi start-master.sh     3、定位到下面部分
  • oracle_执行计划_谓词信息和数据获取 周凡杨 oracle执行计划
      oracle_执行计划_谓词信息和数据获取(上) 一：简要说明 在查看执行计划的信息中，经常会看到两个谓词filter和access，它们的区别是什么，理解了这两个词对我们解读Oracle的执行计划信息会有所帮助。 简单说，执行计划如果显示是access，就表示这个谓词条件的值将会影响数据的访问路径（表还是索引），而filter表示谓词条件的值并不会影响数据访问路径，只起到
  • spring中datasource配置 g21121 dataSource
    datasource配置有很多种，我介绍的一种是采用c3p0的，它的百科地址是： http://baike.baidu.com/view/920062.htm   <!-- spring加载资源文件 --> <bean name="propertiesConfig" class="org.springframework.b
  • web报表工具FineReport使用中遇到的常见报错及解决办法（三） 老A不折腾 finereportFAQ报表软件
    这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、repeated column width is largerthan paper width： 这个看这段话应该是很好理解的。比如做的模板页面宽度只能放
  • mysql 用户管理 墙头上一根草 linuxmysqluser
    1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户mysql> insert into mysql.user(Host,User,Password) values(‘localhost’,'jeecn’,password(‘jeecn’));//刷新系统权限表mysql>flush privileges;这样就创建了一个名为：
  • 关于使用Spring导致c3p0数据库死锁问题 aijuans springSpring 入门Spring 实例Spring3Spring 教程
    这个问题我实在是为整个 springsource 的员工蒙羞 如果大家使用 spring 控制事务，使用 Open Session In View 模式， com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.
  • 百度词库联想 annan211 百度
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title&g
  • int数据与byte之间的相互转换实现代码 百合不是茶 位移int转bytebyte转int基本数据类型的实现
    在BMP文件和文件压缩时需要用到的int与byte转换,现将理解的贴出来;   主要是要理解;位移等概念 http://baihe747.iteye.com/blog/2078029   int转byte;   byte转int;   /** * 字节转成int,int转成字节 * @author Administrator *
  • 简单模拟实现数据库连接池 bijian1013 javathreadjava多线程简单模拟实现数据库连接池
    简单模拟实现数据库连接池 实例1： package com.bijian.thread; public class DB { //private static final int MAX_COUNT = 10; private static final DB instance = new DB(); private int count = 0; private i
  • 一种基于Weblogic容器的鉴权设计 bijian1013 javaweblogic
            服务器对请求的鉴权可以在请求头中加Authorization之类的key，将用户名、密码保存到此key对应的value中，当然对于用户名、密码这种高机密的信息，应该对其进行加砂加密等，最简单的方法如下： String vuser_id = "weblogic"; String vuse
  • 【RPC框架Hessian二】Hessian 对象序列化和反序列化 bit1129 hessian
     任何一个对象从一个JVM传输到另一个JVM，都要经过序列化为二进制数据(或者字符串等其他格式，比如JSON)，然后在反序列化为Java对象，这最后都是通过二进制的数据在不同的JVM之间传输(一般是通过Socket和二进制的数据传输)，本文定义一个比较符合工作中。   1. 定义三个POJO    Person类 package com.tom.hes
  • 【Hadoop十四】Hadoop提供的脚本的功能 bit1129 hadoop
    1. hadoop-daemon.sh 1.1 启动HDFS ./hadoop-daemon.sh start namenode ./hadoop-daemon.sh start datanode  通过这种逐步启动的方式，比start-all.sh方式少了一个SecondaryNameNode进程，这不影响Hadoop的使用，其实在 Hadoop2.0中，SecondaryNa
  • 中国互联网走在“灰度”上 ronin47 管理 灰度
    中国互联网走在“灰度”上（转） 文/孕峰   第一次听说灰度这个词，是任正非说新型管理者所需要的素质。第二次听说是来自马化腾。似乎其他人包括马云也用不同的语言说过类似的意思。   灰度这个词所包含的意义和视野是广远的。要理解这个词，可能同样要用“灰度”的心态。灰度的反面，是规规矩矩，清清楚楚，泾渭分明，严谨条理，是决不妥协，不转弯，认死理。黑白分明不是灰度，像彩虹那样
  • java-51-输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 bylijinnan java
    public class PrintMatrixClockwisely { /** * Q51.输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 例如：如果输入如下矩阵： 1 2 3 4 5 6 7 8 9
  • mongoDB 用户管理 开窍的石头 mongoDB用户管理
      1:添加用户    第一次设置用户需要进入admin数据库下设置超级用户（use admin）      db.addUsr({user:'useName',pwd:'111111',roles:[readWrite,dbAdmin]});    第一个参数用户的名字    第二个参数
  • [游戏与生活]玩暗黑破坏神3的一些问题 comsci 生活
        暗黑破坏神3是有史以来最让人激动的游戏。。。。但是有几个问题需要我们注意      玩这个游戏的时间，每天不要超过一个小时，且每次玩游戏最好在白天      结束游戏之后，最好在太阳下面来晒一下身上的暗黑气息，让自己恢复人的生气   &nb
  • java 二维数组如何存入数据库 cuiyadll java
    using System; using System.Linq; using System.Text; using System.Windows.Forms; using System.Xml; using System.Xml.Serialization; using System.IO; namespace WindowsFormsApplication1 {
  • 本地事务和全局事务Local Transaction and Global Transaction(JTA) darrenzhu javaspringlocalglobaltransaction
    Configuring Spring and JTA without full Java EE http://spring.io/blog/2011/08/15/configuring-spring-and-jta-without-full-java-ee/ Spring doc -Transaction Management http://docs.spring.io/spri
  • Linux命令之alias - 设置命令的别名，让 Linux 命令更简练 dcj3sjt126com linuxalias
    用途说明 设置命令的别名。在linux系统中如果命令太长又不符合用户的习惯，那么我们可以为它指定一个别名。虽然可以为命令建立“链接”解决长文件名的问 题，但对于带命令行参数的命令，链接就无能为力了。而指定别名则可以解决此类所有问题【1】。常用别名来简化ssh登录【见示例三】，使长命令变短，使常 用的长命令行变短，强制执行命令时询问等。   常用参数 格式：alias 格式：ali
  • yii2 restful web服务[格式响应] dcj3sjt126com PHPyii2
    响应格式 当处理一个 RESTful API 请求时， 一个应用程序通常需要如下步骤 来处理响应格式： 确定可能影响响应格式的各种因素， 例如媒介类型， 语言， 版本， 等等。 这个过程也被称为 content negotiation。 资源对象转换为数组， 如在 Resources 部分中所描述的。 通过 [[yii\rest\Serializer]]
  • MongoDB索引调优（2）——[十] eksliang mongodbMongoDB索引优化
    转载请出自出处：http://eksliang.iteye.com/blog/2178555 一、概述       上一篇文档中也说明了，MongoDB的索引几乎与关系型数据库的索引一模一样，优化关系型数据库的技巧通用适合MongoDB，所有这里只讲MongoDB需要注意的地方 二、索引内嵌文档     可以在嵌套文档的键上建立索引，方式与正常
  • 当滑动到顶部和底部时，实现Item的分离效果的ListView gundumw100 android
    拉动ListView，Item之间的间距会变大，释放后恢复原样； package cn.tangdada.tangbang.widget; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import andr
  • 程序员用HTML5制作的爱心树表白动画 ini JavaScriptjqueryWebhtml5css
    体验效果：http://keleyi.com/keleyi/phtml/html5/31.htmHTML代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <ti
  • 预装windows 8 系统GPT模式的ThinkPad T440改装64位 windows 7旗舰版 kakajw ThinkPad预装改装windows 7windows 8
      该教程具有普遍参考性，特别适用于联想的机器，其他品牌机器的处理过程也大同小异。 该教程是个人多次尝试和总结的结果，实用性强，推荐给需要的人！   缘由 小弟最近入手笔记本ThinkPad T440，但是特别不能习惯笔记本出厂预装的Windows 8系统，而且厂商自作聪明地预装了一堆没用的应用软件，消耗不少的系统资源（本本的内存为4G，系统启动完成时，物理内存占用比
  • Nginx学习笔记 mcj8089 nginx
    一、安装nginx             1、在nginx官方网站下载一个包，下载地址是：  http://nginx.org/download/nginx-1.4.2.tar.gz      2、WinSCP(ftp上传工
  • mongodb 聚合查询每天论坛链接点击次数 qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    /* 18 */ { "_id" : ObjectId("5596414cbe4d73a327e50274"), "msgType" : "text", "sendTime" : ISODate("2015-07-03T08:01:16.000Z"
  • java术语（PO/POJO/VO/BO/DAO/DTO） Luob. DAOPOJODTOpoVO BO
    PO(persistant object) 持久对象 在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数据库的操作. VO(value object) 值对象 通
  • 算法复杂度 Wuaner Algorithm
    Time Complexity & Big-O： http://stackoverflow.com/questions/487258/plain-english-explanation-of-big-o http://bigocheatsheet.com/ http://www.sitepoint.com/time-complexity-algorithms/
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他