canvas

创建一个canvas HTML 创建canvas元素 <canvas id="canvas"></canvas> 设置宽高使用标签width，height属性，注意不能使用css或style样式 display默认为inline <canvas id="canvas" width="1024" height="768" style="border: 1px solid #ccc; display: block; margin: 0 auto;">当前浏览器不支持canvas，请更换浏览器后再试</canvas> JavaScript 获取canvas //获取canvas元素 var canvas = document.getElementById('canvas') //使用context进行绘制 var context = canvas.getCountext('2d'); 除了通过上面HTML属性设置canvas宽高之外，当然也可以用javascript来设置 canvas.width = 1024 canvas.height = 768 也可以使用javascript检测浏览器是否支持canvas if(canvas.getContext('2d')){ var context = canvas.getCountext('2d'); }else{ alert(

在创建新的控件或修改现有的控件时，我们都会涉及到重写控件或 View 的 onDraw 方法。 onDraw 方法会传入一个 Canvas 对象，它是你用来绘制控件视觉界面的画布。 在 onDraw 方法里，我们经常会看到调用 save 和 restore 方法，它们到底是干什么用的呢？ ❑ save ：用来保存 Canvas 的状态。 save 之后，可以调用 Canvas 的平移、放缩、旋转、错切、裁剪等操作。 ❑ restore ：用来恢复 Canvas 之前保存的状态。防止 save 后对 Canvas 执行的操作对后续的绘制有影响。 save 和 restore 要配对使用（ restore 可以比 save 少，但不能多），如果 restore 调用次数比 save 多，会引发 Error 。 例如：我们先想在画布上绘制一个右向的三角箭头，当然，我们可以直接绘制，另外，我们也可以先把画布旋转 90 °，画一个向上的箭头，然后再旋转回来（这种旋转操作对于画圆周上的标记非常有用）。然后，我们想在右下角有个 20 像素的圆，那么， onDraw 中的核心代码是： int px = getMeasuredWidth(); int py = getMeasuredWidth(); // Draw background canvas.drawRect(0, 0, px, py,

简介 HTML5 canvas 最初起源于苹果（Apple）的一项实验，现在已经成为了web中受到广泛支持的2D 快速模式绘图 （2D immediate mode graphic ）的标准。许多开发者现在利用它来实现众多的多媒体项目、可视化醒目以及游戏等等。然而，随着我们构建的应用程序的复杂度的增加，我们难免会遇到所谓的性能问题。 已经存在众多优化canvas性能的方法了，但是还没有一篇文章将这些方法系统的整理并加以分析。本文的目的就在于将这些方法整理、巩固以使其曾为 开发者们更容易理解、消化、吸收的资源。本文囊括了适用于所有计算机绘图环境（computer graphics environments）的最基本的优化方法，以及特定于canvas的优化方法。其中特定于canvas的优化方法可能会随着canvas实现方式的 更新而发生变化。特别的，当浏览器开发商实现了canvas GPU 加速时，我们探讨的某些优化方法可能会显得并不是特别有效，这些情况我们会在特定的地方标注出来。 请注意，本文侧重点不在于讨论HTML5 canvas的用法。如果想了解canvas的具体用法可以参见HTML5 Rocks网站中 canvas相关的文章 。比如 Dive into HTML5 chapter 以及 MDN tutorial 。 性能测试 为了处理飞速变化着的HTML5 canvas，

GUIer们应该对Android的GUI实现这有所好奇，肯定也是经过一番搜索的，比如先找TextView这种简单的，draw接口了、onDraw接口了、paint接口了、onPaint接口了，通过这些接口进一步找到发现Drawable的draw接口实际绘制的，接着发现是Canvas接口绘制的，接着发现是jni到了SkCanvas这样的本地接口了，SkCanas原来是skia（类似cairo）这个纯2D少量3D图形引擎的核心类，问题就转移到了skia机制和实现身上了. 本文是一位大牛的文章，介绍了你想知道的Android的图形方面的东西，很全，很系统，地址: http://blog.csdn.net/arm10504/article/details/5483971 Android apk 里面的画图分为2D和3D两种：2D是由 Skia 来实现的，也就是我们在框架图上看到的SGL，SGL也会调用部分 opengl 的内容来实现简单的3D效果；3D部分是由OpenGL|ES实现的，OpenGL|ES是Opengl的嵌入式版本，我们先了解一下Android apk的几种画图方式，然后再来来看一看这一整套的图形体系是怎么建立的。 首先画图都是针对提供给 应用 程序的一块内存填充 数据 ， 没去研究过一个Activity是否就对应着底层的一个surface

简介 <canvas>是一个可以使用JavaScript在其中绘制图形的HTML元素，可以用于制作照片集或者制作动画。 Canvas默认大小是300px*150px，但是可以使用HTML的高度和宽度属性来自定义Canvas的尺寸。 基本用法 <canvas id="tutorial" width="150" height="150"></canvas> canvas需要使用结束标签，只有两个属性width,height。可以使用DOM的属性来进行设置，也可以使用CSS来定义大小。同时canvas也可以拥有margin, border, background等属性 对于不支持canvas的浏览器，只需要在canvas标签中提供替换内容，这样支持canvas的浏览器就会忽略容器中包含的内容。而只是正常渲染canvas <canvas id="stockGraph" width="150" height="150"> 　　current stock price: $2.15+0.12 </canvas> <canvas id="clock" width="150" height="150"> 　　<img src="images/clock.png" width="150" height="150" alt="clock"> </canvas> 渲染上下文