canvas

最近接到的一个新需求：页面一个静态H5，中间有一页是输入信息，然后跳转到最后一页，自动将页面生成图片，用户可以长按图片保存到手机上。 展示一下最后一页的样子： 刚拿到这个需求，在网上看了很多文章，最普遍的是使用 html2canvas + canvas2image 来实现。于是，跟着前人的脚步，踏上了一个不断采坑采坑采坑的旅程。 下面直接描述我在做这个需求过程中遇到的问题以及解决办法吧： 1.html2canvas 图片跨域： 这个问题网上很多解决办法： 这个是最常用的， 刚开始我只是加了红色框里面的这一句，但是并没有任何作用，依旧报错。后来看到有人说，加上前面那一句，所以果断在加进去。 这两句其实表达的是同一个意思：允许图片跨域。 当然，也有网友说，直接给一个空值就可以，我当时试了一下，并不ok~~~~. 2.多次使用canvas drawImage 方法图片展示问题 2.1 图片加载顺序问题 在我这个需求里面，肯定是文字描述以及二维码是展示在图片上面的，刚开始我是 1. drawImage 文字， 2. drawImage 二维码 3. drawImage 背景大图 然而，结果让我大吃一惊，只有背景图加载渲染出来了。然后，通过无所不能的网络才知道：drawImage 的顺序应该是： 图片最底下的需要最先加载渲染。 2.2 图片显示不完整 在2.1 问题出现的同时还遇到了这个问题

Canvas的概述 定义 <canvas> 是H5新增的标签 canvas提供给了 javascript 绘图接口 canvas绘图建立在坐标系上 应用领域 炫酷特效、banner 可视化数据（图表） 游戏 大型应用（地图） 在线系统 （在线PS ） canvas标签 属性 width 属性 height 方法 getContext() 可选的参数 "2d" / "webgl" 返回上下文环境 绘图环境 该对象提供API，让JavaScript来绘制图形 绘图基础 路径的开启和闭合 beginPath() 开启路径 closePath() 关闭路径 （把路径闭合） 设置起点 moveTo(x, y) 画线 lineTo(x , y) 绘制直线 描边 lineWidth 属性 设置描边线的粗细 strokeStyle 属性 设置描边颜色 stroke() 绘制 填充 fillStyle 属性 填充颜色 fill() 执行填充 快速矩形 rect(x, y, width, height) 绘制矩形路径 strokeRect(x, y, width, height) 描边矩形 fillStroke(x, y, width, height) 填充矩形 clearRect(x, y, width. height) 清除矩形 （可以用来清除屏幕） 圆弧 arc(x, y, radius,

一直想自己做点小东西，直到最近看了本《 HTML5游戏开发 》，才了解游戏开发中的一点点入门知识。 本篇就针对学习的几个样例，自己动手实践，做了个FlappyBird， 源码共享在度盘 ；也可以参考 github ，里面有更多的游戏样例。 游戏截图 HTML5之Canvas Canvas是Html5中用于绘图的元素，它可以绘制各种图形，比如长方形，多边形，圆形等等。如果想要了解Canvas的使用可以参考： http://www.w3school.com.cn/tags/html_ref_canvas.asp //如果想要使用canvas,首先需要获得上下文对象： ctx = document.getElementById('canvas').getContext('2d'); //然后使用这个ctx绘制图形 在cavas每个绘制都是独立的操作。比如下图的两个绘制图形，第二个会以覆盖的形式绘制，因此 绘制图形的顺序 就显得十分重要了。 canvas之drawImage() 本篇的游戏开发中，主要使用的是依据图片绘制的api: drawImage() ，它有两个基本的使用方法： ctx.drawImage(image,this.bx,this.by,this.bwidth,this.bheight); ctx.drawImage(image,x,y,width,height,this