HTML5 Canvas入门
2015-12-06 23:30
591 查看
HTML5的canvas(画布)元素使用JavaScript在网页上绘制图像。下面以一个简单例子及其效果图(图1)开始:
图2折线的实现(仅需要替换drawRect()中的代码):
图3的实现(仅需要替换drawRect()中的代码):
参考资料:
http://www.w3school.com.cn/
http://www.w3school.com.cn/tags/html_ref_canvas.asp
http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html
不断学习中。。。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> canvas{border:dashed 2px #CCC} </style> <script type="text/javascript"> /* canvas元素本身没有绘图能力。所有绘制工作必须在JavaScript中完成 */ function drawRect() { var c=document.getElementById("myCanvas"); /* 创建context对象(内建的HTML5对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法) */ var cxt=c.getContext("2d"); /* 绘制一个黄色的实心矩形,并指定了位置和尺寸 */ cxt.fillStyle="yellow"; cxt.fillRect(40,40,220,120); /* 替换以上两句,变成空心矩形 */ /* cxt.strokeStyle = 'yellow'; */ /* cxt.strokeRect(40,40,220,120); */ /* 替换以上两句,变成填充色为红-绿-蓝渐变的矩形 */ /* var gnt1 = cxt.createLinearGradient(40,40,260,40); gnt1.addColorStop(0,'red'); gnt1.addColorStop(0.5,'green'); gnt1.addColorStop(1,'blue'); cxt.fillStyle = gnt1; cxt.fillRect(40,40,220,120); */ } </script> </head> <body onload="drawRect();"> <!-- 画布是一矩形区域(图中虚线框),这里设置id、宽度和高度 --> <canvas id="myCanvas" width="300" height="200"></canvas> </body> </html>
图2折线的实现(仅需要替换drawRect()中的代码):
var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); /* moveTo():把路径移动到画布中的指定点,不创建线条 */ cxt.moveTo(10,10); /* lineTo():添加一个新点,然后在画布中创建从该点到最后指定点的线条 */ cxt.lineTo(150,50); cxt.lineTo(10,50); /* stroke():绘制已定义的路径 */ cxt.stroke();
图3的实现(仅需要替换drawRect()中的代码):
var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#CCCCCC"; /* beginPath():起始一条路径,或重置当前路径 */ cxt.beginPath(); /* arc()的参数依次是:圆心x和y坐标、半径、起始角和结束角(弧度)、是否逆时针 */ cxt.arc(150,100,50,0,Math.PI*1.5,false); /* closePath():创建从当前点回到起始点的路径 */ cxt.closePath(); /* fill():填充当前绘图(路径) */ cxt.fill();
参考资料:
http://www.w3school.com.cn/
http://www.w3school.com.cn/tags/html_ref_canvas.asp
http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html
不断学习中。。。
相关文章推荐
- html5 - 基础格式认识和标签用法(文本元素常用方法)
- HTML5基础--开发工具
- HTML5基础--新特性
- HTML5 Canvas画标准的五星红旗(中国国旗)
- html5 科大讯飞文字合成语音
- html5 postMessage解决跨域、跨窗口消息传递
- HTML5的 input:file上传类型控制
- HTML5----HTML在Browser中的运行机制(笔记篇)
- Html5基础笔记
- H5中需要掌握的 ANIMATION 动画效果
- H5中需要掌握的 ANIMATION 动画效果
- H5中需要掌握的 ANIMATION 动画效果
- Html5大文件断点续传实现方法
- css3和html5的基础
- HTML5你不知道的那些功能
- 失物招领发布-HTML5调摄像头
- 对HTML5的理解
- HTML5 history API,创造更好的浏览体验
- HTML5新特性总结
- HTML5----移动开发兵器谱(笔记篇)