html5画,html5画圆

如何运用HTML5画图

工具/材料

Sublime Text

01

首先要准备一个画布，如下图所示，在HTML5中我们用canvas来表示画布

02

然后我们在script脚本中获取画布对象，如下图所示，运用JS的getElementById方法即可

03

接下来我们通过画布对象的getContext方法来获取上下文2d对象，如下图所示，我们要操作的内容都在里面

04

然后我们给2d上下文填充背景色，如下图所示，运用上下文的fillStyle属性即可

05

接下来，运用上下文的fillRect方法来画一个矩形，注意里面的四个值就是四个坐标，如下图所示

06

最后我们运行界面程序，你会看到如下图所示的红色矩形样例，你可要和上面的坐标对应一下

07

当然2d上下文中还可以画其他的图形，如下图所示的圆形，大家根据自己的需要应用即可

相关问答

Q1: HTML5中如何绘制图表？

图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。

!DOCTYPE html

html

head

meta charset="utf-8"

title绘制图表/title

/head

body

div id="result-stub" class="well hidden"

canvas id="canvas" width="345" height="345"

p你的浏览器不支持canvas元素/p

/canvas

/div

script

//   1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。

var

canvas = document.getElementById('canvas'),

context = null;

context = canvas.getContext('2d');

var img = new Image();

img.src ='chart-background.png';//这里是一张具有图表背景的图片

//    2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。

img.onload = function() {

//绘制图片

context.drawImage(img, 0, 0);

//绘制直线

context.beginPath();

context.moveTo(70, 105);

context.lineTo(105, 132);

context.lineTo(142, 250);

context.lineTo(176, 175);

context.lineTo(212, 145);

context.lineTo(245, 197);

context.lineTo(280, 90);

context.stroke();

}

/script

script src="jquery.js"/script

/body

/html

3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。

这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。

Q2: 用html5画一只乌龟，用属性来做

html5画乌龟，可以使用 HTML5 Canvas API来实现。

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

canvas id="myCanvas" width="200" height="100"/canvas

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

script type="text/javascript"

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

/script

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

Q3: 在HTML5中常用的两种绘图元素分别是什么？

亲爱的提问朋友，html5中常用的两种绘图元素是：Canvas和SVG。

他们都是html5中支持在画布上绘制图形和放入图片的。

Canvas 是H5新出来的标签canvas/canvas

Canvas画布，利用JavaScript在网页绘制图像

在标签中给上宽高：canvas width="800" height="800"/canvas 

SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML  出来的时间比较老

SVG 用来定义用于网格的基于矢量的图形。