HTML5基础之canvas绘图(一)
来源:互联网 发布:java 首字母大写方法 编辑:程序博客网 时间:2024/05/20 04:09
canvas绘图之线条绘制
canvas是html5中新定义的标签,它是提供一张画布,通过JavaScript来绘制图形。值得注意的是canvas 元素本身是没有绘图能力的,所有的绘制工作必须要是在 JavaScript 内部完成的。
在html5中canvas的使用:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas>
在上述代码中,我们定义了一个id为myCanvas的canvas标签,width和height分别定义了画布的款宽高,style定义了标签的属性,这里也可以通过css样式来定义。
在canvas标签中绘制图形是通过Javascript代码来实现的。Javascript实现canvas标签的绘制功能,主要分为以下几步:
- 获取canvas标签的ID
var myCanvas = document.getElementById('myCanvas ');
- 创建context对象
var cxt=myCanvas.getContext("2d");
- 通过cxt对象绘制图形,下面代码绘制了一条(0,0)到(200,100)的黑色实线。
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
注意:在绘制线条时,我们在设置完moveTo和lineTo的参数后,我们一定要调用stroke()方法,不然绘制的线条是无法显示的。
完整代码:
<!DOCTYPE html><html> <head> <title></title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> </body> <script type="text/javascript"> var myCanvas = document.getElementById('myCanvas'); var cxt = myCanvas.getContext('2d'); cxt.moveTo(0,0); cxt.lineTo(200,100); cxt.stroke(); </script></html>
0 0
- HTML5基础之canvas绘图(一)
- HTML5 Canvas初体验之绘图基础
- HTML5-Canvas绘图基础
- 安卓鸟学Html5 之Canvas绘图实践一
- Html5之canvas绘图
- canvas绘图基础(一)
- HTML5特性 > Canvas >基础绘图
- Html5 系列之:Canvas绘图
- HTML5 Canvas 基础 一
- HTML5之canvas基础
- (17)HTML5-Canvas画布基础绘图
- HTML5 Canvas绘图基础(待更新)
- H5基础(5)-HTML5绘图canvas
- canvas学习之路(一)基础绘图功能解析
- canvas学习之路(一)基础绘图功能解析
- HTML5之Canvas(一)
- HTML5中的Canvas绘图操作(一)
- Html5 Canvas 系列_绘图一
- 文档注释+jar文件生成+jar使用
- escape()、encodeURI()、encodeURIComponent()区别详解
- getopt— C-style parser for command line options
- Android中属性动画解析
- position:sticky实现iOS6+下的粘性布局
- HTML5基础之canvas绘图(一)
- mediawiki系列1:皮肤的自定义
- 编写JNI的两种应用层与JNI层方法映射方式
- 获取分享到微信的缩略图 thumbData
- SQL子查询并判断如果为NULL赋值0
- java 序列化
- VS201 LINK2001 ___CxxFrameHandler3、@__security_check_cookie编译报错的解决
- 在线修改大表为分区表或更改其索引
- github简单连接使用