zoukankan      html  css  js  c++  java
  • html5学习之路(Canvas画布1)

    使用canvas画一个矩形,圆和直线

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>canvas示例</title>
    <script type="text/javascript">
    
    	function mydrawRect(){
    		var canvas=document.getElementById("rect");
    		if (canvas==null){
    			return false;
    			}
    		var context=canvas.getContext('2d');
    		context.fillStyle="#EEEEFF";
    		context.fillRect(0,0,400,300);
    		context.fillStyle="red";
    		context.strokeStyle="blue";
    		context.lineWidth=1;
    		//绘制一个矩形
    		context.fillRect(50,50,100,100);
    		context.strokeRect(50,50,100,100);
    		//绘制一个圆
    		context.beginPath();
    		context.arc(200,200,50,0,Math.PI*2,true);
    		context.closePath();
    		context.fillStyle='rgba(255,0,0,0.25)';
    		context.fill();
    		//画直线
    		context.beginPath();
    		context.moveTo(100,100);
    		context.lineTo(100,300);
    		context.lineTo(300,300);
    		context.closePath();
    		//context.fillStyle='rgba(255,0,0,0.25)';
    		//context.fill();
    		context.stroke();
    		
    		
    		}
    
    </script>
    
    
    
    </head>
    
    <body onload="return mydrawRect();">
    <canvas id="rect" width="400" height="300">
    
    </body>
    </html>
    

    显示效果:

  • 相关阅读:
    9月9日刷题
    7-4日刷题
    7-3日刷题
    7-2日刷题
    The Key To Accelerating Your Coding Skills
    初识机器学习
    python数据分析与量化交易
    部署远程jupyter
    SQLserver2008一对多,多行数据显示在一行
    kvm虚拟化
  • 原文地址:https://www.cnblogs.com/lixingle/p/3312999.html
Copyright © 2011-2022 走看看