HTML5 canvas画布
2016-06-18 22:10
429 查看
HTML5中canvas元素用于在网页上绘制图形。
Canvas使用JavaScript来控制画图
Canvas具有直线、矩形、圆以及添加图像的方法
将上面的代码保存为canvas.html,并将其编码设置为utf-8(否则中文乱码),使用浏览器打开就可以看到如下效果:
这里创建Canvas标签,并定义其id为myCanvas,便于JavaScript绘图时获取该标签对象。
再看JavaScript绘图部分:
第一句getElementById,通过Canvas标签的ID获取canvas对象。
第二句getContext,获取context对象。
第三句调用Context对象的方法fillStyle,即填充其颜色。
第四句调用Context对象的fillRect方法指定填充的区域。
运行结果如下:
运行结果如下:
效果如下:
注意,一定要给Img添加onload事件,否则图片不显示。
其中,1.png为自己找的图片素材。打开页面可以看到图片显示在canvas画布中了。我的运行效果如下,图片百度随便找的,凑合看~~
Canvas的特点
Canvas画布是一个矩形区域,可以控制其每一个像素Canvas使用JavaScript来控制画图
Canvas具有直线、矩形、圆以及添加图像的方法
Canvas标签的使用
下面的代码是使用canvas画面绘制一个200*200红色矩形:<!Doctype html> <html> <head> <title>我的canvas页面</title> <meta charset="utf-8"/> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,200,200); </script> </body> </html>
将上面的代码保存为canvas.html,并将其编码设置为utf-8(否则中文乱码),使用浏览器打开就可以看到如下效果:
<canvas id="myCanvas" width="200" height="200">
这里创建Canvas标签,并定义其id为myCanvas,便于JavaScript绘图时获取该标签对象。
再看JavaScript绘图部分:
var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,200,200);
第一句getElementById,通过Canvas标签的ID获取canvas对象。
第二句getContext,获取context对象。
第三句调用Context对象的方法fillStyle,即填充其颜色。
第四句调用Context对象的fillRect方法指定填充的区域。
Canvas的其他实例
直线
<!Doctype html> <html> <head> <title>我的canvas页面</title> <meta charset="utf-8"/> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> </body> </html>
运行结果如下:
圆
<!Doctype html> <html> <head> <title>我的canvas页面</title> <meta charset="utf-8"/> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> </body> </html>
运行结果如下:
渐变
<!Doctype html> <html> <head> <title>我的canvas页面</title> <meta charset="utf-8"/> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script> </body> </html>
效果如下:
图像
<!Doctype html> <html> <head> <title>我的canvas页面</title> <meta charset="utf-8"/> </head> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image(); img.src="1.png"; img.onload=function(e){ cxt.drawImage(img,0,0); } cxt.drawImage(img,0,0); </script> </body> </html>
注意,一定要给Img添加onload事件,否则图片不显示。
其中,1.png为自己找的图片素材。打开页面可以看到图片显示在canvas画布中了。我的运行效果如下,图片百度随便找的,凑合看~~
相关文章推荐
- html5平板游戏列表
- HTML5浏览器兼容性解决方案
- 使用HTML5技术控制电脑或手机上的摄像头
- HTML5新增及移除的元素
- html5中file对象
- html5中input新增属性
- HTML5简介(二)
- HTML5简介(一)
- 移动前端头部标签(HTML5 head meta)
- 为什么要学HTML5
- FileUpload系列:(4)HTML5的 input:file上传类型控制
- HTML5自学(一)
- html5学习站点推荐
- canvas 简易时钟
- 使用spring mvc+localResizeIMG实现HTML5端图片压缩上传
- 在线制作h5
- html5向左滑动删除特效
- wex5实现的时段选择功能
- HTML5:视频控制
- HTML5 离线web应用