zoukankan      html  css  js  c++  java
  • 13-1 画布绘制基本线条

    趋势 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>
    

      

  • 相关阅读:
    [TJOI2013]单词
    [AHOI2005]病毒检测
    [SCOI2016]围棋
    [SDOI2008]Sandy的卡片
    [POI2005]Sza-Template
    [Usaco2015 Feb]Censoring
    浅谈算法——KMP
    yii2邮件配置教程,报Expected response code 250 but got code "553"原因
    yii2设置发送邮件的一些配置
    js 的正则表达式 部分展示test()方法的验证功能
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/7077080.html
Copyright © 2011-2022 走看看