前些年的时候,突然对Canvas感兴趣,利用空闲时间做一些Canvas小例子进行练习,仅供学习分享使用。如有不足之处,还请指正。
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素及JavaScript对象
向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度,如下所示:
<canvas id="myCanvas" width="200" height="100"></canvas>
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var cxt=c.getContext("2d");
注意:getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
实例一、灯笼绘制
以下是一个灯笼,并作了简要的说明。
具体绘制思路在页面上有说明,不再赘述,代码如下:
<script type="text/javascript">
//绘制椭圆
function ParamEllipse(context, x, y, a, b) {
//max是等于1除以长轴值a和b中的较大者
//i每次循环增加1/max,表示度数的增加
//这样可以使得每次循环所绘制的路径(弧线)接近1像素
var step = (a > b) ? 1 / a : 1 / b;
context.fillStyle = "#ff0000";
context.beginPath();
context.moveTo(x + a, y); //从椭圆的左端点开始绘制
for (var i = 0; i < 2 * Math.PI; i += step) {
//参数方程为x = a * cos(i), y = b * sin(i),
//参数为i,表示度数(弧度)
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.stroke();
context.fill();
context.closePath();
};
//绘制矩形
function FillRect(context, x, y, w, h, flag) {
var grd = context.createLinearGradient(x+w/2, y, x + w/2, y + h);
if (flag) {
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "red");
} else {
grd.addColorStop(0, "red");
grd.addColorStop(1, "yellow");
}
context.fillStyle = grd;
context.fillRect(x, y, w, h);
}
//绘制线条
function SetLine(ctx, x, y, x1, y1) {
ctx.beginPath();
ctx.strokeStyle = "yellow";
ctx.moveTo(x,y);
ctx.lineTo(x1,y1);
ctx.stroke();
ctx.closePath();
}
window.onload = function () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var startX = 150; //中心坐标x
var startY = 300; //中心坐标y
var pWidth = 120; //椭圆长轴
var pHeigth = 80; //椭圆形短轴
var fWidth = 120; //矩形宽
var fheight = 40; //矩形高
//绘制椭圆
ParamEllipse(ctx, startX, startY, pWidth, pHeigth);
//在椭圆上方和下方绘制长方形,且有一半的高度和椭圆重叠
FillRect(ctx, startX - fWidth / 2, startY - pHeigth - (fheight / 2), fWidth, fheight, true);
FillRect(ctx, startX - fWidth / 2, startY + pHeigth - (fheight / 2), fWidth, fheight, false);
//在矩形下方绘制线条,8个单位一条线,长度为40,均匀分布在矩形下方
var lLen = fheight; //画线的范围始终在矩形之下
var lInterval = 8; //线与线之间的间隔
for (var i = 0; i < (fWidth / 8) + 1; i++) {
SetLine(ctx, startX - fWidth / 2 + i * lInterval, startY + pHeigth + fheight / 2, startX - fWidth / 2 + i * lInterval, startY + pHeigth + fheight / 2 + lLen);
}
//对三部分进行拆解
//1. 上矩形
var right = 380;
FillRect(ctx, startX - fWidth / 2 + right, startY - pHeigth - (fheight / 2) - 150, fWidth, fheight, true);
//2. 中椭圆
ParamEllipse(ctx, startX + right, startY - 50, pWidth, pHeigth);
//3. 下矩形
FillRect(ctx, startX - fWidth / 2 + right, startY + pHeigth - (fheight / 2) + 50, fWidth, fheight, false);
//4. 下线
for (var i = 0; i < (fWidth / 8) + 1; i++) {
SetLine(ctx, startX - fWidth / 2 + i * lInterval + right, startY + pHeigth + fheight / 2 + 100, startX - fWidth / 2 + i * lInterval + right, startY + pHeigth + fheight / 2 + lLen + 100);
}
//画线,将其连接起来
var lsX = startX + pWidth + 20;
var lsY = startY;
var leX = startX + pWidth + 20 + 100;
var leY = startY;
SetLine(ctx, lsX, startY - 30, leX - 30, leY - 150);
SetLine(ctx, lsX, startY - 15, leX, leY - 50);
SetLine(ctx, lsX, startY + 15, leX, leY + 100);
SetLine(ctx, lsX, startY + 30, leX - 30, leY + 150);
//左上标写上说明
ctx.font = "35px Arial";
var t = "灯笼组成--2016-11-13";
ctx.fillText(t, 50, 50);
}
</script>
实例二、绘制时钟
绘制一个走动的时钟,具体如下图所示:
具体思路在上图已有说明,代码如下:
<script type="text/javascript">
//绘制圆形的弧度,ctx 为绘制环境,x,y为绘制中心,r为绘制半径,st为起始弧度,end为结束弧度
function circle(ctx, x, y, r, st, end, w) {
ctx.lineWidth = w;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, r, st, end, true);
ctx.stroke();
}
//画一个白色的圆,用以覆盖
function circle0(ctx, x, y, r, st, end) {
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(x, y, r, st, end, true);
ctx.fill();
}
function circle1(ctx, x, y, r, st, end, w) {
ctx.strokeStyle = "gray";
ctx.lineWidth = w;
ctx.beginPath();
ctx.arc(x, y, r, st, end, true);
ctx.stroke();
}
//绘制时钟用的线
function line(ctx, x1, y1, x2, y2, w) {
if (w == 1) {
ctx.strokeStyle = "red";
} else if (w == 2) {
ctx.strokeStyle = "blue";
} else {
ctx.strokeStyle = "black";
}
ctx.lineWidth = w;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function drawClock() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
//绘制一个钟表
var cX = 300;
var cY = 200;
var radius = 100;
//绘制分与秒的刻度
for (var i = 0; i < 60; i++) {
circle(ctx, cX, cY, radius, i * 6 * Math.PI / 180, (i + 1) * 6 * Math.PI / 180, 1);
}
circle0(ctx, cX, cY, radius * 9 / 10, 0, 2 * Math.PI, true);
//绘制时刻度
for (var i = 0; i < 12; i++) {
circle(ctx, cX, cY, radius, i * 30 * Math.PI / 180, (i + 1) * 30 * Math.PI / 180, 2);
}
circle0(ctx, cX, cY, radius * 8 / 10, 0, 2 * Math.PI, true);
//外围再画一圈
circle1(ctx, cX, cY, radius * 11 / 10, 0, 2 * Math.PI, 1);
ctx.save();
ctx.fillStyle = "black";
ctx.font = "10px Arial";
//在钟表的周围画上数字
for (var i = 0; i < 12; i++) {
var fX = cX + Math.cos((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
var fY = cY + Math.sin((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
ctx.fillText((i + 1), fX, fY);
}
var date = new Date();
var second = date.getSeconds();
var minute = date.getMinutes();
var hour = date.getHours();
hour = hour % 12; //采用12小时制
var secondX = cX + Math.cos(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
var secondY = cY + Math.sin(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
var minuteX = cX + Math.cos(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
var minuteY = cY + Math.sin(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
//小时为了准确起见,应该要加上分的弧度
var hourX = cX + Math.cos(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
var hourY = cY + Math.sin(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
//画秒针,红色
line(ctx, cX, cY, secondX, secondY, 1);
//画分针,蓝色
line(ctx, cX, cY, minuteX, minuteY, 2);
//画时针,黑色
line(ctx, cX, cY, hourX, hourY, 3);
ctx.fillStyle = "black";
ctx.font = "15px Arial";
ctx.fillText("CurrentTime is : " + date.toLocaleString(), 150, 450);
ctx.save();
}
window.onload = function () {
//循环,1s一次,且要在加载完才可以开始,否则会出现找不到对象的异常
setInterval(drawClock, 1000);
}
</script>
实例三、绘制太极图
采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示:
具体思路和绘制逻辑,在上图中已有说明,代码如下:
<script type="text/javascript">
//只画边框线,无填充
function bigCircle(ctx,x, y, r, st, end, w,oc) {
ctx.lineWidth = w;
ctx.beginPath();
ctx.arc(x, y, r, st, end, oc);
ctx.closePath();
ctx.stroke();
}
//有填充,画小圆,x,y表示大圆的圆心,r表示大圆的半径,w表示线宽,oc表示方向,l表示上下,d表示度数
function smallCircle(ctx, x, y, r, st, end, w, oc, l,d) {
var Angle = d * Math.PI / 180; //偏移角用弧度表示
ctx.lineWidth = w;
ctx.beginPath();
if (l) {
ctx.fillStyle = "black";
ctx.arc(x + (r / 2) * Math.sin(Angle), y - (r / 2) * Math.cos(Angle), r/10, st, end, oc);
} else {
ctx.fillStyle = "red";
ctx.arc(x - (r / 2) * Math.sin(Angle), y + (r / 2) * Math.cos(Angle), r/10, st, end, oc);
}
ctx.closePath();
ctx.stroke();
ctx.fill();
}
//此函数是画带S形曲线的圆,l表示左右,true表示左,顺时针,false表示右,逆时针
//d表示度数
function halfCircle(ctx, x, y, r, w, l,d) {
ctx.lineWidth = w;
if (l) {
ctx.fillStyle = "black";
} else {
ctx.fillStyle = "red";
}
ctx.beginPath();
var Angle = d * Math.PI / 180;//偏移角用弧度表示
ctx.arc(x + (r / 2) * Math.sin(Angle), y - (r / 2) * Math.cos(Angle), r / 2, Math.PI / 2 + Angle, Math.PI * 3 / 2 + Angle, true);
ctx.arc(x - (r / 2) * Math.sin(Angle), y + (r / 2) * Math.cos(Angle), r / 2, Math.PI*3 / 2 + Angle, Math.PI / 2 + Angle, true);
ctx.arc(x, y, r, Math.PI / 2 + Angle, Math.PI * 3 / 2 + Angle, l); //顺时针,逆时针通过参数判断
ctx.closePath();
ctx.stroke();
ctx.fill();
}
var num = 0;//表示旋转的度数
function drawTaichi() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var cX = 200;
var cY = 200;
var radius = 150;
ctx.clearRect(0,0,c.width,c.height);
//绘制s线 左
halfCircle(ctx, cX, cY, radius, 1, true, num);
//右
halfCircle(ctx, cX, cY, radius, 1, false, num);
//绘制小圆,上
smallCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 1, true, true, num);
//绘制小圆,下
smallCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 1, true, false, num);
//绘制外圆
bigCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 2, true);
ctx.save();
num++;
num = num % 360;//只有360°,所以大于360,就重新开始
}
window.onload = function () {
setInterval(drawTaichi, 200);
}
</script>
实例四、绘制五星红旗
Html5+JavaScript 在Canvas上绘制五星红旗,具体思路如下图所示:
绘制思路在上图中已有说明,具体代码如下:
<script type="text/javascript">
//绘制五角星,其中一点垂直向上,相隔的点相连,即可绘制。
function drawStar(ctx,starCenterX,starCenterY,starRadius) {
var aX = starCenterX;
var aY = starCenterY - starRadius;
var bX = starCenterX - Math.cos(18 * Math.PI / 180) * starRadius;
var bY = starCenterY - Math.sin(18 * Math.PI / 180) * starRadius;
var cX = starCenterX - Math.cos(54 * Math.PI / 180) * starRadius;
var cY = starCenterY + Math.sin(54 * Math.PI / 180) * starRadius;
var dX = starCenterX + Math.cos(54 * Math.PI / 180) * starRadius;
var dY = starCenterY + Math.sin(54 * Math.PI / 180) * starRadius;
var eX = starCenterX + Math.cos(18 * Math.PI / 180) * starRadius;
var eY = starCenterY - Math.sin(18 * Math.PI / 180) * starRadius;
ctx.beginPath();
ctx.fillStyle = "yellow";
ctx.moveTo(aX, aY);
ctx.lineTo(cX, cY);
ctx.lineTo(eX, eY);
ctx.lineTo(bX, bY);
ctx.lineTo(dX, dY);
ctx.lineTo(aX, aY);
ctx.fill();
ctx.closePath();
}
window.onload = function () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var width = 300*1.5;
var height = 200*1.5;
var sX = 50; //其实坐标
var sY = 50; //其实坐标
var step = 10*1.5;
//绘制矩形
ctx.beginPath();
ctx.lineWidth = 1;
ctx.fillStyle = "red";
ctx.fillRect(sX, sY, width, height);
ctx.closePath();
//绘制大五角星
var bigStarCenterX = sX + 5 * step;
var bigStarCenterY = sY + 5 * step;
var bigStarRadius = (height * 3 / 10) / 2; //外接圆直径为旗高3/10,半径要再除以2
drawStar(ctx, bigStarCenterX, bigStarCenterY, bigStarRadius);
//绘制小五角星
var smallStarRadius = (height * 1 / 10) / 2; //外接圆直径为旗高1/10,半径要再除以2
var smallStarCenterX_1 = sX + 10 * step;
var smallStarCenterY_1 = sY + 2 * step;
drawStar(ctx, smallStarCenterX_1, smallStarCenterY_1, smallStarRadius);
var smallStarCenterX_2 = sX + 12 * step;
var smallStarCenterY_2 = sY + 4 * step;
drawStar(ctx, smallStarCenterX_2, smallStarCenterY_2, smallStarRadius);
var smallStarCenterX_3 = sX + 12 * step;
var smallStarCenterY_3 = sY + 7 * step;
drawStar(ctx, smallStarCenterX_3, smallStarCenterY_3, smallStarRadius);
var smallStarCenterX_4 = sX + 10 * step;
var smallStarCenterY_4 = sY + 9 * step;
drawStar(ctx, smallStarCenterX_4, smallStarCenterY_4, smallStarRadius);
};
</script>
备注
赤壁【作者】杜牧【朝代】唐
折戟沉沙铁未销,自将磨洗认前朝。东风不与周郎便,铜雀春深锁二乔。