_Slience_
_Slience_

《HTML5 Canvas核心技术——图形、动画与游戏开发》第三章要点汇总

笔记点

  • 使用context.measure("W").width可以获取当前context下W的绘制在canvas上的宽度
  • 通过指定fillText、strokeText中的最后一个参数就可以实现插入canvas的字段指定宽度
  • 使用context.createLinearGradient来实现绘制文本的颜色渐变
  • 使用context.createPattern来实现绘制文本用image来填充在线演示
  • 对context.font的设置是需要按照如下顺序的
1、font-style(normal/italic/oblique)(实测中Firefox对此属性貌似不支持)
2、font-variant(normal/small-caps)
3、font-weight(normal/bold/bolder/lighter/100/200...)字符的笔画粗细
4、font-size(xx-small/x-small/medium/large/x-large/xx-large)字型的大小
5、line-height:（书中）浏览器会将该属性强制设定为其默认值，如果你设置了该值，浏览器会忽略你所制定的值（那为什么还要指定）
6、font-family
  • 使用textAlign来实现文本的左右对齐，使用textBaseline来实现文本的上下对齐

在canvas中实现对文本的输入


在线演示

你可能感兴趣的:(html5-canvas)

  • 03、HTML5-Canvas(画布) 王梓懿_1fbc
    一、什么是Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像画布是一个矩形区域，可以控制其每一像素canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法二、canvas基本使用添加canvas元素(创建画布)//在页面中添加一个canvas标签(默认画布是300*150)不支持canvas浏览器通过JavaScript绘制图像//1、获取到canvas元素
  • HTML5-canvas小知识 一包
    canvas画布大小标签中设置，不加单位js中设置varcanvas=document.getElementById('canvs')varcontext=canvas.getContext('2d')//获得绘图的上下文环境canvas.width=1024;//设置canvas大小canvas.height=768;不建议用css设置，css里面设定canvas的宽高并不是真正的大小，而是同比
  • Echarts 开源，免费商用图表控件使用整理 天马3798 jQuery插件Echarts开源免费商用图表控件
    一、Echarts基础说明ECharts是一个使用JavaScript实现的开源可视化库，涵盖各行业图表，满足各种需求。ECharts遵循Apache-2.0开源协议，免费商用。ECharts兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。Echarts是百度前端团队做的基于html5-canvas的开源图表绘制组件
  • HTML5 canvas带渐变色的圆形进度条动画 sunny_girls 前端插件
    query-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件。该圆形进度条使用的是HTML5canvas来绘制圆形进度条及其动画效果，进度条使用渐变色来填充，效果非常的酷。效果演示：http://www.htmleaf.com/Demo/201505271919.html下载地址：http://www.htmleaf.com/html5/html5-canvas/2
  • HTML5 canvas图片爆炸特效 souhugirl 插件库
    这是一款基于html5canvas的炫酷图片爆炸飞散特效js插件。该js插件当用鼠标点击图片时，图片会有玻璃窗被子弹击碎时的爆炸飞散效果，非常炫酷。在线演示：http://www.htmleaf.com/Demo/201502151384.html下载地址：http://www.htmleaf.com/html5/html5-canvas/201502151383.html
  • HTML5-canvas动画闪烁分析 今夕又何夕 前端开发
    主要是setInterval驱动的不精准，该时钟无法跟浏览器重绘的频率同步而会导致时序问题。关于FPS和浏览器重绘：浏览器保持一个帧频（通常为60fps）刷新画面，包括页面中的canvas；动画绘制过程如下：擦除canvas--计算所有元件的位置及颜色--逐个绘制所有元件到canvas中。该过程中，当擦除整个canvas后，浏览器到达重绘点时，canvas为空白，浏览器就会绘制空白的canvas，
  • html5 canvas 添加消除矩形 可移动重置缩放 奕轻辰 html5
    HTML5-canvas学习~~canvas矩形框，可创建、消除、重置最近需要完成一个小demo：初始化一个canvas，通过鼠标的down、move、up事件来画矩形框。查了很多资料，发现都没有我想要的。只好自己尝试写一个，下面是一些参考的网址：http://jsfiddle.net/a7mad24/aPLq5/废话不多直接上demo：首先是html页面：demo1ResetCreateStar
  • HTML5-canvas绘图黑屏白屏解决方案（详解双缓冲绘图机制） 大菜鸟231 前端JavaScript必知必会
    HTML5-canvas绘图黑屏白屏解决方案（详解双缓冲绘图机制）使用canvas绘图的前端工程师可能都会遇到过canvas绘图黑屏、白屏的问题。以前写过一篇文章描述过hybrid下canvas黑屏的一种可能性：http://blog.csdn.net/yuhk231/article/details/53560782那么如果我们面对的场景就是移动端各大浏览器呢？当出现黑屏、白屏的时候就只能认栽了吗
  • Html5 Canvas画线有毛边解决方法 大宅小涛 HTML5-JSJS
    例外参考：http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A%E9%97%AE%E9%A2%98/Html5Canvas所有的画线指令画出来的线条都有毛边（比如lineTo，arcTo，strokeRect），这是因为在Canvas中整数坐标值对应的位置恰巧是屏
  • HTML5-Canvas 初认识 weixin_33862041
    1.理解canvascanvas其实是HTML5中一个新增加的标签，对于canvas标签本身并没有什么非常强大的属性（width、height、id、class、style），仅仅作为一个画布存在，只能使用js获取canvas绘图上下文环境（也就是获取CanvasRenderingContext2D对象啦）。下面用一段小程序来描述：varc=document.getElementById("myC
  • HTML5-Canvas动态时钟 本该如此 HTML5CSS
    Canvas基础小案例-动态小时钟Canva动态时钟//获取Canvas对象varcav=document.getElementById("mycanvas");//获取对应的CanvasRenderingContext2D对象(画笔)varcxt=cav.getContext("2d");functiondrawClock(){cxt.clearRect(0,0,500,500)varnow=n
  • 仪表盘动画 凯旋
    http://www.htmleaf.com/html5/html5-canvas/201609294051.htmlhttp://www.jq22.com/jquery-info2883http://www.html5tricks.com/demo/jquery-dashboard-animation/index.htmlhttp://www.itxwzj.com/effects/show/id
  • 学会了HTML5-Canvas，就可以画出你喜欢的仓老师了 DarkSpy13
    canvas结合js的动画粒子canvas写成的玫瑰花HTML5利用canvas标签可以画出很多稀奇古怪的东西，比如鲜红的玫瑰、人物动漫等等，还可以画出真实的人物哦！今天小编给大家画一个canvas七彩随手标旋转粒子散开的一个特效，源码给大家看看：完整代码上传群250777811不知道大家是不是接触编程这块的，如果是初学或者是已经在前端这条路走过的话，那应该知道canvas这东西很有趣的，欢迎大家
  • 03、HTML5-Canvas(画布) EndEvent
    一、什么是Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像画布是一个矩形区域，可以控制其每一像素canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法二、canvas基本使用添加canvas元素(创建画布)//在页面中添加一个canvas标签(默认画布是300*150)不支持canvas浏览器通过JavaScript绘制图像//1、获取到canvas元素
  • HTML5-canvas使用 0981b16f19c7
    canvas标签用于绘制图像（通过脚本，通常是JavaScript）。绘制一个红色矩形varcanvas=document.getElementById('myCanvas');varctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);1、getContext()方法可返回一个对象，该对象提供了用
  • HTML5-Canvas对图片的操作 canvas
    Canvas图片API非常强大，有两个最基础的方法，一是展示图片，二是像素级的修改图片后再把它打印到画布上。   1、通过drawImage()将图片显示在画布上      var img = new Image();      img.src = '';       &nbs
  • HTML5-Canvas对图片的操作 canvas
    转自：http://www.cnblogs.com/uuuuuu/archive/2013/03/12/2956135.html Canvas图片API非常强大，有两个最基础的方法，一是展示图片，二是像素级的修改图片后再把它打印到画布上。   1、通过drawImage()将图片显示在画布上      var img = new Image();
  • HTML5-canvas学习 canvas
    　　对于HTML5，我感兴趣的是canvas，这个新元素。而在我了解之后，发现canvas可以用来制作一些简单的html5游戏。因此，我想通过学习canvas，制作出自己的html5游戏。 　　canvas是一块画布。其本身没有绘图能力，而是提供一系列的API，借助javascript来实现绘图功能。 　　其次，由于HTML5 canvas暂时还无法支持所有浏览器。具体有: IE9&
  • HTML5-Canvas canvas
      <!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <title>HTML5-Canvas</title> &l
  • html5-Canvas画飞机 canvas
    　　本人初学者，对照例子学习HTML5，高手请跳过。 　　画飞机最痛苦的事情就是坐标，我是从网上找的demo，比对着代码画的飞机（静态的）。　　深深佩服画飞机人的能力，坐标很难找的。不好控制，不知道大家有什么好的工具化可以查看坐标位置，麻烦告诉我下，在这里先谢谢了。 　　敲打了以下代码加上百度，有些进步，一天进步一点！   View Code <!DOCTYPE
  • html5-Canvas绘图 canvas
        在html5中我觉得最重要的就是引入了Canvas，使得我们可以在web中绘制各种图形。给人感觉单在这点上有点模糊我们web和桌面程序的感觉。在html5外web中也有基于xml的绘图如：VML、SVG。而Canvas为基于像素的绘图。Canvas是一个相当于画板的html节点，我们必须以js操作绘图。 如下： <canvas id="my
  • HTML5－Canvas画布的使用 Q_Jimmy HTML5
    一，首先让我们来了解一下CSSsolid属性solid的意思为：solid.adj固体的，实心的，结实的，可靠的n.固体，立方体solid主要有3个功能：（1）给文本加边框例如：stye="border:thinsolidred"参数分析：border表示设置边框，后面三个参数是设置边框的属性：thin（表示设置边框为细线，除此之外还有：medium[中粗线]，thick（粗线）也可以自定义宽度：
  • 初识html5-canvas使用 canvas
    基本上会的全部用上了 渐变 图像裁剪 有时间给补上 照例先上效果图   Javascript 1 function StartDraw() 2 { 3 4 var con=document.getElementById("cans").getContext("2d"); 5 con.save()
  • Html5-Canvas示例 canvas
    　　Html5下新增的一个重要标签<Canvas>可以让我们进行2D绘图。用js+Canvas做一个简单例子：绘制一个可以在页面上移动的人物——“艾斯蒂尔”。 前期准备 　　这里准备了一张8×8的人物图片，8个方向及8帧，图片是8×8的，在X轴上每一帧时向前走一步，而一帧大小为256×256；Y轴上是面向8个方向。 html标签 　　因为
  • HTML5-canvas实例：2D折线数据图与2D扇形图 canvas
    基础知识： <canvas id="demo" width="400" height="400"></canvas> 在页面上创建canvas标签，然后获取canvas这个元素，因为是画2D图，所以是调用.getContext('2d') 二维图方法 var target = document.get
  • HTML5-canvas实例：刮刮乐游戏 canvas
    实现方法： 　　（1）利用canvas画布，fillRect()描绘出一个矩形（不是透明），定位盖在某个标签如div上面（这个标签写着中奖的信息） 　　（2）globalCompositeOperation = 'destination-out';利用此属性，手指划过画布，arc(x,y, radius, 0, Math.PI*2, true)绘画圆形，那么这个圆形会把之前描绘出的矩形穿透
  • HTML5-Canvas canvas
        说明：本文及文章最后所附相关文章，是我对于书籍《Pro HTML5 Programming》英文版的个人学习总结。    一.Using the HTML5 Canvas API 1.convas坐标系统 Convas中的坐标系统以convas的左上角为坐标原点，水平坐标从左到右递增，垂直坐标从上到下递增。 2.CSS and Canvas
  • HTML5-canvas会动的时钟 canvas
    API说明： 1.stroke()方法绘制当前路径的边框。路径定义的几何线条产生了，但线条的可视化取决于 strokeStyle、lineWidth、lineJoin、lineCap 和 miterLimit 等属性。 2.save() 方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。这就允许您临时地改变图像状态，然后，通过调用 restore() 
  • 总结html5-canvas学习笔记 耶特先生
    canvas是html5中很重要的一部分，我们可以用它来绘制各种平面图形，3d图，动画等等。每每看到网上超炫的html5页面，首先立马下载下来，心里想着有一天自己也可以做出这样酷炫的效果，骚年你是不是这样的！比如这样的：还有这样的（这个是3d效果，点击图片进去看看吧）： 但是，功夫不是一天练成的，一门新技术不是你学着做个demo就掌握了的，我们先要一点一点地学习基础知识才行呀。刚开始学html5的
  • html5-canvas文字倒影 vawe666 canvas
    <canvas width="500" height="800"    id="canvas"></canvas><script>//获取画布DOM  还不可以操作var canvas=document.getElementById('canvas');//ale
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他