HTML5基础之canvas绘图(一)
2015-09-22 11:10
537 查看
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>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- HTML5中在客户端验证文件上传的大小
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法