html5中如何绘制基本

html5中是怎么实现绘制图形？

创新互联建站成立与2013年，是专业互联网技术服务公司，拥有项目网站设计、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元洛阳做网站,已为上家服务,为洛阳各地企业和个人服务,联系电话:18980820575

html5中可以实现绘画图形的功能，需要注意的是html5只提供2D，不提供3D绘画功能。canvas元素是H5总新增的元素，它用来专门绘制图形。你也可以把canvas元素理解成一块“画布”，我们可以在其中绘制图形。在canvas元素中绘画不是拿鼠标来绘制图形，实际上在H5完成绘画功能，不仅仅需要canvas元素，而且需要JavaScript脚本来配合才能完成绘制图形。所以说把html5中的canvas元素理解成画布是是合适不过的。

html5中的canvas元素

canvas元素必须要指定id、width（宽）、height（高）属性，虽然canvas元素是H5中用来绘制的图形，但是它的放置放和其他的元素没有区别。比如说canvas id="myCanvas" width="200" height="100"是放置了一个200*100的canvas元素。

html5中的常用的绘制图形

绘制矩形

创建canvas元素→取得上下文（使用canvas对象的getcontent方法获得上下文）→填充绘制边框→设定样式→指定线宽、颜色。代码如下图：

可以用clearRect方法擦除指定区域的图形，使矩形区域颜色变透明，context.clearRect(x,y,width,height)。

绘制圆形

绘制圆形要比矩形复杂一点，需要使用到路径，创建图形路径→关闭路径→调用绘制方法、路径。代码如下：

cxt.beginPath();是开始创建路径，有几次是循环创建路径，每次开始都需要调用beginPath()函数。

cxt.arc(70,18,15,0,Math.PI*2,true);是是创建路径，使用了arc（）方法，它的语法如下：

cxt.closePath();cxt.fill();关闭绘画路径后调用绘制路径。

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新特性的讲解。

HTML5图片不会显示

html5图片不会显示，问题可能出现在你加载的图片路径不正确或者图片名字格式等等写错了；

img src="images/**.jpg" / src="这里是图片的路径"

然后再次测试一下，希望我的回答对你有所帮助，如果还有其他疑问，请继续追问我；

html5中如何导入图片

具体方法如下：

img src="图片路径" alt="图片描述"

例：img src="img/pro1.png" alt=""

html5中设置整页背景图片的方法是利用css3样式：

/* Set up proportionate scaling */

width: 100%;

height: auto;

/* Set up positioning */

position: fixed;

top: 0;

left: 0;

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */

img.bg {

left: 50%;

margin-left: -512px;   /* 50% */

}

}

html5 怎么让图片自适应？

html5中是通过css3的background-size来控制自适应的。

直接在图片代码里面设置style，例如img src="xxx.jpg" style="max-width:100%;"/2、要么给图片统一一个class名例如response-img，然后在css文件里面设置这个class

html5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容）

2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

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

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

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

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

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

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

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

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

新闻名称：html5图,html5图片3d旋转
转载注明：http://kswjz.com/article/dsgoghe.html