趋势 Canvas+WebSocket
我们能用Canvas做些什么？
1. 游戏：毫无疑问，游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧，Ohad认为运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥更大的潜力。
2. 图表制作：图表制作时常被人们忽略，但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作，但Ohad认为大家完全可以用Canvas来实现。当然，使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。
3. banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。
4. 模拟器：Ohad认为，无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。
5. 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
6. 字体设计：对于字体的自定义渲染将完全可以基于Web，使用HTML5技术进行实现。
7. 图形编辑器：Ohad预测，图形编辑器将能够100%基于Web实现。
8. 其他可嵌入网站的内容：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。Ohad呼吁大家继续挖掘Canvas的潜力，运用HTML5技术创造更多价值。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
//通过代码检测浏览器是否支持画布
try {
document.createElement("canvas").getContext("2d");
alert("您的浏览器支持HTML5画布");
}catch (e) {
alert("您的浏览器不支持HTML5画布");
}
//绘制对角线
function drawCanvas() {
//获得画布对象
var canvas = document.getElementById(‘canvas1‘);
//获得context对象
var context = canvas.getContext(‘2d‘);
//用绝对坐标绘制一条路径
context.beginPath();//起始一条路径
context.moveTo(70,140);//把路径移动到画布中的指定点，不创建线条
context.lineTo(140,70);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
context.strokeStyle="#ff0000";//设置画笔颜色
context.stroke();//将这条路径绘制到canvas上
}
window.onload = function() {
drawCanvas();
};
</script>
</head>
<body>
<canvas id="canvas1" style="border:solid 1px #36F;" height="200" width="200">
您的浏览器不支持画布哦
</canvas>
</body>
</html>
时间： 2025-01-05 04:12:10