代码之家 › 专栏 › 技术社区 › Budda

如何在web2.0中绘图?

drawing html5 html

Budda · 技术社区 · 14 年前

谢谢。

抱歉,如果这个问题有点“愚蠢”,但我不能让它更聪明。

3 回复 | 直到 9 年前

João Louros 14 年前

你想做什么的一个简单例子:

<html>
  <head>
    <title>Hexagon canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        //first let's get canvas HTML Element to draw something on it
        var canvas = document.getElementById('tutorial');
        //then let's see if the browser supports canvas element
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');

            //Pick Hexagon color, this one will be blue
            ctx.fillStyle = "rgb(0, 0, 255)";
            //let's start a path
            ctx.beginPath();
            //move cursor to position x=10 and y=60, and move it around to create an hexagon
            ctx.moveTo(10,60);
            ctx.lineTo(40,100);
            ctx.lineTo(80,100);
            ctx.lineTo(110,60);
            ctx.lineTo(80,20);
            ctx.lineTo(40,20);
            //fill it and you got your first Hexagon
            ctx.fill();

            //This one will be green, but we will draw it like the first one
            ctx.fillStyle = "rgb(0, 255, 0)";
            ctx.beginPath();
            ctx.moveTo(110,160);
            ctx.lineTo(140,200);
            ctx.lineTo(180,200);
            ctx.lineTo(210,160);
            ctx.lineTo(180,120);
            ctx.lineTo(140,120);
            ctx.fill();
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="300" height="300"></canvas>
  </body>
</html>

David Hedlund 14 年前

Canvas element

mkoistinen 14 年前

我怀疑你听说过画布元素。您可以从这里开始: http://en.wikipedia.org/wiki/Canvas_element

祝你好运!

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前