canvas学习一

Posted 2020-06-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas学习一相关的知识，希望对你有一定的参考价值。

canvas 坐标转换

1 //把页面上的坐标转换为canvas坐标
2 function windowToCanvas(canvas,x,y){
3     var bbox = canvas.getBoundingClientRect();
4     return {
5         x: x - bbox.left * (context.canvas.width / bbox.width),
6         y: y - bbox.top * (context.canvas.height / bbox.height)
7     }
8 }
9

canvas画grid

 1 function drawGrid( color, stepx, stepy){
 2     context.strokeStyle = color;
 3     context.lineWidth = 0.5;
 4     for(var i = stepx + 0.5;i < canvas.width;i += stepx){
 5         context.beginPath();
 6         context.moveTo(i,0);
 7         context.lineTo(i,context.canvas.height);
 8         context.stroke();
 9     }
10     for(var i = stepx + 0.5;i < context.canvas.height;i += stepx){
11         context.beginPath();
12         context.moveTo(0,i);
13         context.lineTo(context.canvas.width,i);
14         context.stroke();
15     }
16 }

canvas图片放大

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         body{
  8             background: rgba(100,145,250,0.3);
  9         }
 10         #canvas{
 11             border:1px solid cornflowerblue;
 12             position: absolute;
 13             left:250px;
 14             top:10px;
 15             background: #eee;
 16             border: thin solid #aaa;
 17             cursor: pointer;
 18             box-shadow: rgba(200,200,255,0.9) 5px 5px 10px;
 19         }
 20         #scaleSlider{
 21             vertical-align: center;
 22             width:100px;
 23             margin-left: 90px;
 24         }
 25         #controls{
 26             margin-left:15px;
 27             padding:0;
 28         }
 29         #scaleOutput{
 30             position: absolute;
 31             width:60px;
 32             height: 30px;
 33             margin-left:10px;
 34             vertical-align: center;
 35             text-align: center;
 36             color: blue;
 37             text-shadow:  2px 2px 4px rgba(100,140,250,0.8);
 38         }
 39     </style>
 40 </head>
 41 <body>
 42 <div id="controls">
 43     <output id="scaleOutput">1.0</output>
 44     <input type="range" id="scaleSlider" min="1" max="3.0" step="0.01" value="1.0">
 45 </div>
 46 
 47 <canvas id="canvas" width="800" height="520"></canvas>
 48 
 49     <script>
 50         var canvas = document.getElementById(‘canvas‘),
 51                 context = canvas.getContext(‘2d‘),
 52                 selectElement = document.getElementById(‘compositingSelect‘),
 53                 scaleSlider = document.getElementById(‘scaleSlider‘),
 54                 scaleOutput = document.getElementById(‘scaleOutput‘),
 55                 scale = 1.0,
 56                 MINIMUM_SCALE = 1.0,
 57                 MAXIMUM_SCALE = 3.0,
 58                 img = new Image();
 59 
 60 //        放大镜
 61         //fUNCTION------------------------
 62         function drawImage(){
 63             var w = canvas.width,
 64                     h = canvas.height,
 65                     sw = w * scale,
 66                     sh = h * scale;
 67             context.clearRect(0,0,w,h);
 68             context.drawImage(img, -sw/2 + w/2, -sh/2 + h/2, sw, sh);
 69         }
 70 
 71         function drawScaleText(value){
 72             var text = parseFloat(value).toFixed(2);
 73             var percent = parseFloat(value - MINIMUM_SCALE) / parseFloat(MAXIMUM_SCALE - MINIMUM_SCALE);
 74             scaleOutput.innerText = text;
 75             percent = percent < 0.35 ? 0.35 : percent;
 76             scaleOutput.style.fontSize = percent * MAXIMUM_SCALE/1.5 +‘em‘;
 77         }
 78 
 79         scaleSlider.onchange = function(e){
 80             scale = e.target.value;
 81             if(scale < MINIMUM_SCALE){
 82                 scale = MINIMUM_SCALE;
 83             }else if(scale > MAXIMUM_SCALE){
 84                 scale = MAXIMUM_SCALE;
 85             }
 86             drawScaleText(scale);
 87             drawImage();
 88         }
 89 
 90         context.fillStyle = ‘cornflowerblue‘;
 91         context.strokeStyle = ‘yellow‘;
 92         context.shadowColor = ‘rgba(50,50,50,1.0)‘;
 93         context.shadowOffsetX = 5;
 94         context.shadowOffsetY =5;
 95         context.shadowBlur = 10;
 96 
 97         img.src = ‘1.jpg‘;
 98         img.onload = function(e){
 99             drawImage();
100             drawScaleText(scaleSlider.value);
101         };
102     </script>
103 </body>
104 </html>

View Code

以上是关于canvas学习一的主要内容，如果未能解决你的问题，请参考以下文章

canvas怎么根据坐标获取上面的内容

HTML5画布Canvas坐标轴转换图案填充渐变与阴影

将 HTML Canvas 坐标系转换为笛卡尔坐标系

WPF学习第九章使用Canvas面板进行基于坐标的布局

delphi canvas如何根据中心点坐标和矩形的宽度动态的画出矩形？

Android UICanvas 画布 ④ ( Canvas 坐标系 | Canvas 自身坐标系 | Canvas 绘图坐标系 )

canvas学习 一

canvas学习一