Html 如何在Web2.0中绘图？
我听说Web2.0将支持绘图能力 试图在互联网上找到一些东西，没有什么真正清楚的。你能告诉我一些允许（或者将来允许）用HTML绘制的东西吗 例如：我想有能力在页面上画几个不同颜色的六边形 谢谢Html 如何在Web2.0中绘图？,html,drawing,Html,Drawing,我听说Web2.0将支持绘图能力 试图在互联网上找到一些东西，没有什么真正清楚的。你能告诉我一些允许（或者将来允许）用HTML绘制的东西吗 例如：我想有能力在页面上画几个不同颜色的六边形 谢谢 顺便说一句，如果这个问题有点“愚蠢”，我很抱歉，但我不能让它变得更聪明。你说的很可能是HTML5我怀疑你已经听说了画布元素。您可以在此处开始使用它： 祝你好运 一个你想做什么的快速示例： <html> <head> <title>Hexagon canvas
顺便说一句，如果这个问题有点“愚蠢”，我很抱歉，但我不能让它变得更聪明。你说的很可能是HTML5我怀疑你已经听说了画布元素。您可以在此处开始使用它：
祝你好运 一个你想做什么的快速示例：
<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>
六边形画布教程
函数绘图（）{
//首先让我们使用canvasHTML元素在上面绘制一些东西
var canvas=document.getElementById（'tutorial'）；
//然后让我们看看浏览器是否支持canvas元素
if（canvas.getContext）{
var ctx=canvas.getContext（'2d'）；
//选择六边形颜色，这一个将是蓝色的
ctx.fillStyle=“rgb（0,0255）”；
//让我们开始一条路径
ctx.beginPath（）；
//将光标移动到x=10和y=60的位置，然后四处移动以创建六边形
ctx.moveTo（10,60）；
ctx.lineTo（40100）；
ctx.lineTo（80100）；
ctx.lineTo（110,60）；
ctx.lineTo（80,20）；
ctx.lineTo（40,20）；
//填满它，你就得到了你的第一个六边形
ctx.fill（）；
//这个将是绿色的，但我们将像第一个一样绘制它
ctx.fillStyle=“rgb（0，255，0）”；
ctx.beginPath（）；
ctx.moveTo（110160）；
ctx.lineTo（140200）；
ctx.lineTo（180200）；
ctx.lineTo（210160）；
ctx.lineTo（180120）；
ctx.lineTo（140120）；
ctx.fill（）；
}
}
画布{边框：1px纯黑；}