13-1 画布绘制基本线条

时间 2019-11-30

标签画布绘制基本线条繁體版

原文原文链接

趋势 Canvas+WebSocketjavascript

咱们能用Canvas作些什么？html

1. 游戏：毫无疑问，游戏在HTML5领域具备举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧，Ohad认为运用Canvas制做的图像可以令HTML5游戏在流畅度和跨平台方面发挥更大的潜力。java

2. 图表制做：图表制做时常被人们忽略，但不管企业内部仍是企业间交流合做都离不开图表。如今一些开发者使用HTML/CSS完成图标制做，但Ohad认为你们彻底能够用Canvas来实现。固然，使用SVG（可缩放矢量图形）来完成图表制做也是很是好的方法。canvas

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>