gpt4 book ai didi

html - 如何在 web 2.0 中绘图?

转载 作者:搜寻专家 更新时间:2023-10-31 22:16:50 25 4
gpt4 key购买 nike

听说Web 2.0会支持绘图功能

试图在互联网上找到一些有关的东西,没有什么很清楚。能否请您指出允许(或将来允许)在 HTML 中绘制的内容?

例如:我想在页面上绘制几个不同颜色的六边形。

谢谢。

附言对不起,如果问题有点“愚蠢”,但我不能让它更聪明。

最佳答案

您想要做什么的快速示例:

<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>

关于html - 如何在 web 2.0 中绘图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3653814/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com