Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形_html/css_WEB-ITnose
一、Canvas的基础知识
Canvas是HTML 5中新增的元素,专门用于绘制图形。canvas元素就相当于一块“画布”,一块无色的透明区域,需要利用JavaScript编写在其中进行绘画的脚本。
在页面放置canvas元素很简单,利用
二、Canvas小案例(测试结果来自Google最新版本)
1、绘制矩形
canvas.html:
1:2:3:4:5:canvas元素学习 6:7:8:9:10:canvas元素学习
11:12:13:canvas.js:
1: window.onload=function()2: {3: // 获取canvas 的ID4: var canvas = document.getElementById('canvas');5: if (canvas == null)6: {7: return false;8: }9: // 获取上下文10: var context = canvas.getContext('2d');11: // 设置填充的样式12: context.fillStyle = "#eeeeff";13: // 绘制矩形,以fillStyle填充,fillRect(strokeRect)前两个参数是矩形左上角位置,后两个参数分别是宽和高
//默认原点是canvas的左上角
14: context.fillRect(0,0,400,300);15: context.fillStyle = 'red';16: // 设置边框的样式17: context.strokeStyle = 'blue';18: // 设置边框大小19: context.lineWidth = 2;20: context.fillRect(50,50,100,100);21: // 绘制矩形边框22: context.strokeRect(50,50,100,100);23: }效果:
2、绘制圆形:使用路径绘制
1: // 获取canvas 的ID2: var canvas = document.getElementById('canvas');3: if (canvas == null)4: {5: return false;6: }7: // 获取上下文8: var context = canvas.getContext('2d');9: // 设置填充的样式10: context.fillStyle = "#eeeeff";11: // 绘制矩形,以fillStyle填充12: context.fillRect(0,0,400,300);13: for(var i = 0; i14: {15: // 创建路径16: context.beginPath();17: // 绘制圆形路径18: context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);19: // 关闭路径,如果不关闭,则图像会重叠20: context.closePath();21: context.fillStyle = 'rgba(255,0,0,0.25)';22: // 以fillStyle填充23: context.fill();24: }arc()绘制圆弧,其参数如下
arc(x,y,radius,startAngle,endAngle,anticlockwise):x,y 是圆弧的圆心位置,radius是半径,startAngle和endAngle是起始和结束的角度,单位是弧度(度数必须转为弧 度),anticlockwise是一个布尔值,true表示顺时针绘制图像,false表示逆时针绘制。起始角度是0,结束角度是360(PI*2)就 可以绘制圆形。
效果:
3、绘制直线
绘制直线用到moveTo()和lineTo()两个方法
1: // 获取canvas 的ID2: var canvas = document.getElementById('canvas');3: if (canvas == null)4: {5: return false;6: }7: // 获取上下文8: var context = canvas.getContext('2d');9: // 设置填充的样式10: context.fillStyle = "#eeeeff";11: // 绘制矩形,以fillStyle填充12: context.fillRect(0,0,400,300);13: context.beginPath();
//参数线的起点坐标
14: context.moveTo(50,50);
//参数线的终点坐标
15: context.lineTo(100,100);16: context.closePath();
//关闭路径之后绘制图形
17: context.strokeStyle = 'red';18: context.stroke();效果:
绘制一个复杂点的
1: // 获取canvas 的ID2: var canvas = document.getElementById('canvas');3: if (canvas == null)4: {5: return false;6: }7: // 获取上下文8: var context = canvas.getContext('2d');9: // 设置填充的样式10: context.fillStyle = "#eeeeff";11: // 绘制矩形,以fillStyle填充12: context.fillRect(0,0,400,300);13: var dx = 150;14: var dy = 150;15: var s = 100;16: // 创建路径17: context.beginPath();18: context.fillStyle = 'rgb(100,255,100)';19: context.strokeStyle = 'rgb(0,0100)';20: var x = Math.sin(0);21: var y = Math.cos(0);22: var dig = Math.PI/15 *11;23: for (var i = 0; i24: var x = Math.sin(i * dig);25: var y = Math.cos(i * dig);26: context.lineTo(dx+x*s,dx+y*s);27: }28: context.closePath();29: context.fill();30: context.stroke();效果:
4、绘制曲线:利用bezierCurveTo绘制贝济埃曲线
bezierCurveTo可以绘制曲线,是lineTo的曲线版本
1: // 获取canvas 的ID2: var canvas = document.getElementById('canvas');3: if (canvas == null)4: {5: return false;6: }7: // 获取上下文8: var context = canvas.getContext('2d');9: // 设置填充的样式10: context.fillStyle = "#eeeeff";11: // 绘制矩形,以fillStyle填充12: context.fillRect(0,0,400,300);13: var dx = 150;14: var dy = 150;15: var s = 100;16: // 创建路径17: context.beginPath();18: context.fillStyle = 'rgb(100,255,100)';19: context.strokeStyle = 'rgb(0,0100)';20: var x = Math.sin(0);21: var y = Math.cos(0);22: var dig = Math.PI/15 *11;23: context.moveTo(dx,dy);24: for (var i = 0; i25: var x = Math.sin(i * dig);26: var y = Math.cos(i * dig);27: context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);28: }29: context.closePath();30: context.fill();31: context.stroke();效果
下一篇:Canvas入门(2):图形渐变和图像形变换
上一篇: 使用python文件操作删除某行方法介绍
下一篇: PHP-TSRM线程安全管理器-源码分析