在前面提到Canvas是HTML5中一个重要特点,canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现,下面我们用canvas实现基本图形的绘制。
一、Canvas标签的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="200" height="200" style="border:1px solid red"></canvas>
</body>
</html>
可以看到Canvas就像一块画布,我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
二、画矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="500" height="500" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById('1');
var p=c.getContext("2d");
//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
p.fillStyle="#FF0000";
p.fillRect(0, 0, 300, 300);
p.fillStyle="rgba(0,0,255,0.5)";
p.fillRect(200,200,500,500);
</script>
</html>
三、画线条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById('1');
var p=c.getContext("2d");
p.moveTo(10,10);
p.lineTo(150,50);
p.lineTo(10,50);
p.stroke();
</script>
</html>
四、画圆形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById('1');
var p=c.getContext("2d");
p.fillStyle="#FF0000";
p.beginPath();
p.arc(80,80,15,0,Math.PI*2,true);
p.closePath();
p.fill();
</script>
</html>
五、渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById("1");
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>
</html>
六、绘制图片
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script>
</body>
</html>
七、多边形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById('1');
var p=c.getContext("2d");
p.fillStyle="#FF0000";
p.moveTo(10,10);
p.lineTo(150,50);
p.lineTo(10,50);
p.lineTo(20,30);
p.fill();
</script>
</html>
分享到:
相关推荐
html5实现一个倒计时种,使用canvas绘图试下。
html5 canvas绘制七巧板图形代码 html5 canvas绘制七巧板图形代码
Html5——Canvas实例(制作太阳地球月球三球联动动画)
HTML5实验室——Canvas世界(源码)easel.js jscex.jscexRequire.min.js JSLINQ.js processing.js Vector2.js Vector3.js
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
HTML5,canvas制作游戏2048
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
html5 canvas自定义绘制多边图形代码 html5 canvas自定义绘制多边图形代码
2.22_用canvas绘制一角弯月|canvas曲线的绘制(圆弧和贝塞尔曲线)|Canvas图形、动画、游戏开发从入门到精通全
HTML5 Canvas核心技术 图形、动画与游戏开发 PHP全本正版
《HTML5 Canvas核心技术:图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的经典、五星级畅销书、资深技术专家David Geary新力作。它不仅全面讲解了...
HTML5 Canvas核心技术 图形、动画与游戏开发
网页模板——基于html5 canvas绘制发光的圆点动画特效源码
ASP实例开发源码——canvas-Flash网站管理系统 v1.0.zip
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
《HTML5 Canvas核心技术:图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary力作。...
javascript Canvas图形绘制各类图形动画等示例
一个经典的游戏,左右箭头可以控制垫子的移动
基瑞编著的《HTML5Canvas核心技术:图形动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*...
html5 canvas画布绘制圆形时钟代码