一個簡單的矩形

時間  2019-12-12
標籤 一個 簡單 矩形 简体版
原文   原文鏈接

Html5：javascript

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Rectangle</title>  
  6. <style>  
  7.     body{  
  8.         background:#dddddd;  
  9.     }  
  10.     #canvas{  
  11.         background:#eeeeee;  
  12.         border:1px solid #000000;  
  13.     }  
  14. </style>  
  15. </head>  
  16.   
  17. <body>  
  18.     <canvas id="canvas" width="600" height="400">  
  19.         Canvas not supported  
  20.     </canvas>  
  21.     <script src="rectangle.js"></script>  
  22. </body>  
  23. </html>  


javascript:html

 

 

[javascript] 
  1. // JavaScript Document  
  2. var canvas=document.getElementById('canvas'),  
  3.     context=canvas.getContext('2d');  
  4.   
  5. context.lineJoin='round';  
  6. context.lineWidth=30;  
  7.   
  8. context.font='24px Helvetica';  
  9. context.fillText('Click anywhere to erase',175,40);  
  10.   
  11. context.strokeRect(75,100,200,200);  
  12. context.fillRect(325,100,200,200);  
  13.   
  14. context.canvas.onmousedown=function(e){  
  15.     context.clearRect(0,0,canvas.width,canvas.height);    
  16. };  


js代碼的大概結構爲：html5

 

　　1. 使用document.getElementById()方法來獲取指向canvas的引用。java

　　2. 在canvas對象上調用getContext('2d')方法，獲取繪圖環境變量。canvas

　　3. 而後經過繪圖環境對象在canvas元素上進行繪製。 spa

代碼的前兩行基本上是固定的。.net

　　lineJoin: 當兩條線交匯時建立邊角類型。xml

　　屬性值：beval（斜角），round（圓角），miter（尖角，默認）。htm

　　lineWidth: 設置線條寬度，默認爲1。對象

　　fillText(): 參數（按順序）：要輸出的文本，x座標，y座標，容許的最大文本寬度。

　　strokeRect(): 參數：x座標，y座標，寬度，高度。做用：爲矩形描邊，用strokeStyle, lineWidth, lineJoin, MiterLimit屬性。

　　fillRect(): 參數同上。做用：填充矩形，用fillStyle屬性。

　　clearRect(): 參數同上。將矩形與當前剪輯區域相交範圍內的全部像素清除。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程