简单的HTML5 Spiro绘图页

分享于 

7分钟阅读

Web开发

  繁體

介绍

HTML5迅速增加,所以我想我会用它来旋转,然后试试新的画布元素。 画布元素基本上是一个矩形区域,可以绘制通常的2D 图形元素。路径。文本。等等。 它比SVG轻轻,并允许用户操纵矩形区域内的每个像素,使它的编写游戏非常好。

Background

作为画布的第一步,我选择了十几十年前我写的一个非常简单的程序。 我可以看到最简单的模式是一个圆形路径旋转在另一个圆形路径的两个直径和它的转速比。 记住,我创建了一个非常简单的GDI Windows 应用程序,可以实现类似的。 我可以让我几乎复制并粘贴原始 C++ 代码的绘图部分,并稍加修改,使它的运行( 比如 ),使它的运行起来。 将 int 更改为 var )。 需要更改的另一个原因是,GDI和画布都在左上角,换句话说,大的X 值向右和大的Y 值向下。

网页显示为 below。 它在页面的顶部有四个选择器。 前两个是我前面提到的比例,第三个设置完整电路中的步骤数,第四个选择是颜色。 更改其中任何一个导致立即重绘。 我在所有的浏览器上测试了这个页面: IE9和它的工作方式相同,只有Safari没有绘制颜色选择器或者它的下拉列表项的颜色。

使用代码

主要的HTML代码显示为 below。 我把所有的选择器放在一个 div 中,这样我可以调整CSS以得到所需的间距和外观。 你还可以在IE9中找到一个不错的"开发工具开发工具",让你查看 HTML。CSS。脚本。等等,并允许你在浏览器中修改CSS的内容。 Chrome 有类似的工具( 使用右键单击"检查元素"),在某些方面我发现更好。 选择器需要注意的主要内容是它们都有一个 id ( 因为JavaScript需要这个来找到元素并读取它的属性),并且它们的onchange 处理程序都设置为调用'updateCanvas()'。

<divid='params'>Size Ratio: <selectid='sizeratio'onchange='updateCanvas()'><option>1</option> 
 <option>2</option> 
 <option>3</option> 
 <optionselected="selected">4</option> 
 <option>5</option></select> Speed Ratio: <selectid='speedratio'onchange='updateCanvas()'><option>2</option> 
 <option>3</option> 
 <optionselected="selected">4</option> 
 <option>5</option></select> Steps: <selectid='steps'onchange='updateCanvas()'><option>100</option> 
 <option>200</option> 
 <optionselected="selected">300</option> 
 <option>400</option> 
 <option>500</option></select> Colour: <selectid="color_menu0"name="color_menu0"onchange="updateCanvas();"style="width: 60px"><optionstyle="background-color:#5f9ea0"value="#5f9ea0"selected="selected"/><optionstyle="background-color:#d2691e"value="#d2691e"/><optionstyle="background-color:#ffd700"value="#ffd700"/><optionstyle="background-color:#7fff00"value="#7fff00"/><optionstyle="background-color:#006400"value="#006400"/><optionstyle="background-color:#a52a2a"value="#a52a2a"/><optionstyle="background-color:#ff1493"value="#ff1493"/></select></div><div><canvasid='canvas1'width='700'height='700'>Canvas is not supported by this browser.</canvas></div><scripttype="text/javascript"> updateCanvas();</script>

updateCanvas() 函数的JavaScript代码显示为 below。 代码首先使用 document.getElementById() 获取所有选择器控件,使用 string 参数作为HTML元素的of。 然后需要获取所选索引并使用该索引索引附加到控件的选项。 然后得到选定选项的文本部分,对于前三个选择器,使用 Number() 方法将文本转换为一个浮点数。 对于第四个选择器,我们得到值而不是文本- 原因是选项没有任何文本,因为我们只希望 background 颜色显示。 注意,值文本的格式是标准的颜色格式 #rrggbb,它与HTML中使用的格式相同,并且设置画布值如 fillstyle。

function updateCanvas() {
 var c = document.getElementById("canvas1");
 var ctlSpeedRatio = document.getElementById("speedratio");
 var ctlSizeRatio = document.getElementById("sizeratio");
 var ctlSteps = document.getElementById("steps");
 var ctlColour = document.getElementById("color_menu0");
 var speedRatio = 
 Number(ctlSpeedRatio.options[ctlSpeedRatio.selectedIndex].text);
 var sizeRatio = Number(ctlSizeRatio.options[ctlSizeRatio.selectedIndex].text);
 var steps = Number(ctlSteps.options[ctlSteps.selectedIndex].text);
 var colour = ctlColour.options[ctlColour.selectedIndex].value;
 var cxt = c.getContext("2d");
 cxt.beginPath();
 cxt.fillStyle = "#FFEEEE";
 cxt.clearRect(0, 0, 700, 700);
 cxt.fillRect(0, 0, 700, 700);
 cxt.strokeStyle = colour;//"#5555FF";var xOrigin = 350;
 var yOrigin = 350;
 var jSize = 320/(sizeRatio + 1);
 var iSize = sizeRatio * jSize;
 //begin drawingvar n = steps * speedRatio;
 for (var i = 0; i <= n; i++) {
 var f = i * 3.14159265358979 * 2;
 var xi = (iSize * Math.sin(f/n)) + xOrigin;
 var yi = (iSize * Math.cos(f/n)) + yOrigin;
 var xj = (jSize * Math.sin(f/speedRatio));
 var yj = (jSize * Math.cos(f/speedRatio));
 if (i == 0)
 cxt.moveTo(xi + xj, yi + yj);
 else cxt.lineTo(xi + xj, yi + yj);
 }
 cxt.stroke();
}

Points of Interest

我了解到,你需要通过调用上下文方法的beginpath() 来启动绘图,或者画布不会被删除。 在很多情况下,我注意到了of在很多情况下失败,比如 列出了上下文的所有绘图方法。

历史记录

这是我第一次使用html5元素画布。 我希望展示一些关于canvas和SVG的更深入的文章。


Html5  SPI  
相关文章