HTML 5 Canvas 画图_H5之家 - 中国HTML5教程资源分享第一站

您现在的位置：天新网 > 软件开发

HTML 5 Canvas 画图

2013年08月05日 51cto charles_wang8888

1 2 下一页

按照官方例子画了几个基本图形,算是对于HTML5 Canvas有所了解，但是感觉这里面数学知识太忘记了，虽然以前数学竞赛出身，但是好多年不用了，有所遗忘。

HTML5的canvas元素只是提供了一个画布，而实际的绘制工作由来完成。

基本HTML不说了，也就是搭一个架子，放一个<canvas>元素，然后首部引入一些Javascript文件，这里面每一个js文件都是一个画图的例子.

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>HTML5 Canvas DEMO</title> <script type="text/javascript" src="js/drawRect.js"></script> <script type="text/javascript" src="js/drawPath.js"></script> <script type="text/javascript" src="js/drawLine.js"></script> <script type="text/javascript" src="js/drawLinearGradient.js"></script> <script type="text/javascript" src="js/drawTransformShape.js"></script> <script type="text/javascript" src="js/drawAll.js"></script> </head> <body></body> <h2>canvas：放开你的梦想</h2> <canvas/> <br><br>

例子1：绘制矩形

/** * This file is confidential by Charles.Wang * Copyright belongs to Charles.wang * You can make contact with Charles.Wang (charles_wang888@126.com) */ //这段js代码用于画一个长方形 //参数是传进来的画布canvas的id,表明这段代码画在哪里 function drawRect(id){ //取得canvas对象，也就是我们js代码要画的canvas对象 var canvas=document.getElementById(canvas); if (canvas==null) return false; //从canvas取得图形上下文，这个图形上下文context封装了许多绘画方法，这是一个内置的html5对象 var context=canvas.getContext(2d); //设定好当前图形上下文的样式，夜就是当前使用颜色来绘制图形，此外还有一些其他的样式 context.fillStyle="#0044FF"; //fillXXX用来填充图形的内部，这里fillRect，表明用当前颜色填充图形内部，4个参数分别为起点横坐标/起点纵坐标/宽度/高度 context.fillRect(0,0,400,300); //颜色值既可以用十六进制命名，也可以使用颜色名 context.fillStyle="red"; context.strokeStyle="blue"; //用于设置图形边框的宽度 context.lineWidth=1; context.fillRect(50,50,100,100); //strokeXXX用来描述图形的边框(stroke),这里strokeRect，表明用来绘制刚才矩形的边框 context.strokeRect(50,50,100,100); }

画出来的结果是：

HTML 5 Canvas 画图

例子2：用Path来绘制一组圆形：

/** * This file is confidential by Charles.Wang * Copyright belongs to Charles.wang * You can make contact with Charles.Wang (charles_wang888@126.com) */ function drawPath(id){ var canvas=document.getElementById(id); if(canvas == null) return false; //依旧先拿到canvas对象和上下文对象 var context = canvas.getContext("2d"); //先绘制画布的底图 context.fillStyle="#EEEEEF"; context.fillRect(0,0,400,300); //用循环绘制10个圆形 var n = 0; for(var i=0 ;i<10;i++){ //开始创建路径，因为要画圆，圆本质上也是一个路径，这里向canvas说明，我要开始画了，这是起点 context.beginPath(); //画一个拱形(arcade)，因为圆是一种特殊的拱形 //6个参数分别是起点横坐标，起点纵坐标，圆的半径，起始弧度，结束弧度（2PI刚好是360度），是否顺时针 context.arc(i*25,i*25,i*10,0,Math.PI*2,true); //关闭路径 context.closePath(); context.fillStyle="rgba(255,0,0,0.25)"; //填充刚才所画的圆形 context.fill(); } }

画出来的结果是：

HTML 5 Canvas 画图

例子3：绘制直线，并且用直线组合复杂图形

/** * This file is confidential by Charles.Wang * Copyright belongs to Charles.wang * You can make contact with Charles.Wang (charles_wang888@126.com) */ function drawLine(id){ var canvas=document.getElementById(id); if(canvas==null) return false; var context = canvas.getContext(2d); context.fillStyle="#FF00FF"; context.fillRect(0,0,400,300); var n=0; var dx=150; var dy=150; var s = 100; context.beginPath(); context.fillStyle=rgb(100,255,100); context.strokeStyle=rgb(0,0,100); var x = Math.sin(0); var y = Math.cos(0); var dig=Math.PI/15*11; for(var i = 0;i<30;i++){ var x = Math.sin(i*dig); var y = Math.cos(i*dig); //用三角函数计算顶点 context.lineTo(dx+x*s,dy+y*s); } context.closePath(); context.fill(); context.stroke(); }

画出来的结果是：

HTML 5 Canvas 画图

上一篇： HTML 5 geolocation API 获得用户当前地理位置
下一篇：跨域访问的解决方案（非HTML 5的方法：JSONP)

1 2 下一页