html5 canvas入门
- - Marshal's Blog可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.
将HTML5 Canvas的内容保存为图片
标签：
html5
canvas
图片
| 发表时间：2013-05-19 21:44 | 作者：jia20003
出处：http://blog.csdn.net
主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现
HTML + JavaScript的代码很简单。
<html>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<head>
<script>
window.onload = function() {
draw();
var saveButton = document.getElementById("saveImageBtn");
bindButtonEvent(saveButton, "click", saveImageInfo);
var dlButton = document.getElementById("downloadImageBtn");
bindButtonEvent(dlButton, "click", saveAsLocalImage);
};
function draw(){
var canvas = document.getElementById("thecanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
ctx.fillRect(25,25,100,100);
ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
ctx.fillRect(58, 74, 125, 100);
ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color
ctx.fillText("Gloomyfish - Demo", 50, 50);
}
function bindButtonEvent(element, type, handler)
{
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
element.attachEvent('on'+type, handler);
}
}
function saveImageInfo ()
{
var mycanvas = document.getElementById("thecanvas");
var image = mycanvas.toDataURL("image/png");
var w=window.open('about:blank','image from canvas');
w.document.write("<img src='"+image+"' alt='from canvas'/>");
}
function saveAsLocalImage () {
var myCanvas = document.getElementById("thecanvas");
// here is the most important part because if you dont replace you will get a DOM 18 exception.
// var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image; // it will save locally
}
</script>
</head>
<body bgcolor="#E6E6FA">
<div>
<canvas width=200 height=200 id="thecanvas"></canvas>
<button id="saveImageBtn">Save Image</button>
<button id="downloadImageBtn">Download Image</button>
</div>
</body>
</html>
运行效果如下：
作者：jia20003 发表于2013-5-19 21:44:01 原文链接
阅读：166 评论：0 查看评论
相关 [html5 canvas 图片] 推荐：
Wadda：基于 HTML5 Canvas 的图片放大镜
- - 博客园_首页Wadda 是下一代图片放大技术，使用HTML5 Canvas实现图片放大镜功能. 借助 HTML5 Canvas 标签，能够自定义放大级别而不需要为每个级别定义图片，还能够设置羽化（Fading）效果. 使用非常简单，只需在img标签的title属性中设置放大图片的路径，例如：. 引入Wadda.js文件，并添加如下代码：.
将HTML5 Canvas的内容保存为图片
- - CSDN博客Web前端推荐文章主要思想是借助Canvas自己的API - toDataURL()来实现，整个实现. HTML + JavaScript的代码很简单. 作者：jia20003 发表于2013-5-19 21:44:01 原文链接. 阅读：166 评论：0 查看评论.
html5 canvas 图像处理
- - HTML5研究小组前两天无意中看了下《pro html5 programming》,发现html5竟然也能很好的支持图像处理，在此稍稍交代一下. 与matlab处理图像类似的是，这里也是采用图像矩阵的形式. 下面就介绍一个简单的例子:. context1.drawImage(image,0,0);//绘制原始图像，（0,0）表示图像的左上角位与canvas画布的位置.
备份：html5 canvas cheat sheet
- - 膘叔纯备份资料,HTML5的canvas资料.
HTML5 Canvas双缓存实例
- - Web前端 - ITeye博客转自：http://www.108js.com/article/article3/30046.html?id=255. 下面是用HTML5的
HTML5 Canvas: 测试浏览器是否支持Canvas
- - CSDN博客Web前端推荐文章本文翻译自Steve Fulton & Jeff Fulton. 在获取HTML页面上Canvas元素的引用后，我们需要测试一下该元素是否包含“上下文”(context). Canvas的上下文指的是由浏览器定义的用于绘画的平面. 简单地说，如果上下文不存在的话，Canvas也就名存实亡了. 测试浏览器是否支持Canvas有好几种方法.
HTML5 Canvas开发框架：CasualJS Framework
- Jimmy - ITeye论坛最新讨论CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能，但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制，你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.
25 超棒的 HTML5 Canvas 游戏
- 迎客松 - LinuxEden开源社区-Linux伊甸园Canvas 元素作为HTML5标准的一部分，允许你通过脚本动态渲染点阵图像. 这是为了基于浏览器的矢量图形而设计. HTML Canvas 把一个绘图 API 展现给 JS 客户端，使得脚本能够把想绘制的东西都绘制到一块画布上. 阅读全文 | 邮件推荐 | 评论回复.
HTML5 Canvas(画布)教程 – 图像处理
- - Web前端 - ITeye博客Canvas标记很多年前就被当作一个新的HTML标记成员加入到了HTML5标准中. 在此之前，人们要想实现动态的网页应用，只能借助于第三方的 插件，比如Flash或Java，而引入了Canvas标记后，人们直接打通了通往神奇的动态应用网页的大门. 本教程内容只覆盖了一小部分、但却是非常重 要的canvas标记的应用功能——图像显示和处理.