zoukankan      html  css  js  c++  java
  • <html5 canvas>一个简单的矩形

    Html5

    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:

    [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代码的大概结构为:

      1. 使用document.getElementById()方法来获取指向canvas的引用。

      2. 在canvas对象上调用getContext('2d')方法,获取绘图环境变量。

      3. 然后通过绘图环境对象在canvas元素上进行绘制。 

    代码的前两行基本上是固定的。

      lineJoin: 当两条线交汇时创建边角类型。

      属性值:beval(斜角),round(圆角),miter(尖角,默认)。

      lineWidth: 设置线条宽度,默认为1。

      fillText(): 参数(按顺序):要输出的文本,x坐标,y坐标,允许的最大文本宽度。

      strokeRect(): 参数:x坐标,y坐标,宽度,高度。作用:为矩形描边,用strokeStyle, lineWidth, lineJoin, MiterLimit属性。

      fillRect(): 参数同上。作用:填充矩形,用fillStyle属性。

      clearRect(): 参数同上。将矩形与当前剪辑区域相交范围内的所有像素清除。

  • 相关阅读:
    yii2框架安装
    RabbitMq简单应用
    PHP扩展开发--编写一个helloWorld扩展
    node 笔记整理
    js 笔记整理
    JavaScript event loop事件循环 macrotask与microtask
    移动端 缩放插件备份
    vue 笔记备份
    echart 打开新世界的大门
    canvas 笔记整理
  • 原文地址:https://www.cnblogs.com/Maxq/p/6473719.html
Copyright © 2011-2022 走看看