项目中最近用到了canvas画图的功能,主要利用它来描绘字体,并描绘字体的笔划,动画实现。字体背景为田字格或米字格或图片,仅以田字格与米字格的画法小结供网友参考。 主要用到canvas的画路径与描边、遮罩绘制的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1 {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="div1">
<canvas width="800" height="800" id="cs">你的浏览器不支持canvas!</canvas>
</div>
<script type="text/javascript">
var oCanvas = document.getElementById('cs');
if (oCanvas.getContext) {
var ctx = oCanvas.getContext('2d'),
l = 0,
w = oCanvas.width,
half = w / 2,
span = 5; //每条虚线的实线部分长度为5
ctx.strokeStyle = '#FF0000';
ctx.lineWidth = 2;
ctx.strokeRect(1, 1, w - 2, w - 2);
//依次调用看效果!
//drawReal(ctx);
//drawUnReal(ctx);
//drawUnRealNB(ctx);
drawSimpleUnreal(ctx);
}
//画实线
function drawReal(ctx) {
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
//横线
ctx.moveTo(0, half);
ctx.lineTo(w, half);
//竖线
ctx.moveTo(half, 0);
ctx.lineTo(half, w);
//交叉线1
ctx.moveTo(0, 0);
ctx.lineTo(w, w);
//交叉线2
ctx.moveTo(0, w);
ctx.lineTo(w, 0);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//画虚线,兼容性没问题!
function drawUnReal(ctx) {
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, half);
l = w / 5; //横线路径
for (var i = 0; i < l; i += 2) {
ctx.lineTo(i * span, half);
ctx.moveTo((i + 1) * span, half);
}
//竖线路径
ctx.moveTo(half, 0);
for (var i = 0; i < l; i += 2) {
ctx.lineTo(half, i * span);
ctx.moveTo(half, (i + 1) * span);
}
ctx.translate(half, half);
ctx.rotate(45 * Math.PI / 180);
ctx.moveTo(0, -half * Math.SQRT2);
l = Math.ceil(w * Math.SQRT2 / 5);
//交叉线1
for (var i = 0; i < l; i += 2) {
ctx.lineTo(0, -half * Math.SQRT2 + i * span);
ctx.moveTo(0, -half * Math.SQRT2 + (i + 1) * span);
}
ctx.rotate(90 * Math.PI / 180);
ctx.moveTo(0, -half * Math.SQRT2);
//交叉线2
for (var i = 0; i < l; i += 2) {
ctx.lineTo(0, -half * Math.SQRT2 + i * span);
ctx.moveTo(0, -half * Math.SQRT2 + (i + 1) * span);
}
//统一描边节省性能!
ctx.stroke();
ctx.restore();
}
//画虚线——掏窟窿作法
function drawUnRealNB(ctx) {
drawReal(ctx);
//画窟窿
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
l = w / 5; //横线路径
for (var i = 1; i < l; i += 2) {
ctx.rect(i*span,half-2,span,3);
}
//竖线路径
for (var i = 1; i < l; i += 2) {
ctx.rect(half-2,i*span,3,span);
}
ctx.translate(half, half);
ctx.rotate(45 * Math.PI / 180);
l = Math.ceil(w * Math.SQRT2 / 5);
//交叉线1
for (var i = 1; i < l; i += 2) {
ctx.rect(-2,-half * Math.SQRT2+i*span,3,span);
}
ctx.rotate(90 * Math.PI / 180);
//交叉线2
for (var i = 1; i < l; i += 2) {
ctx.rect(-2,-half * Math.SQRT2+i*span,3,span);
}
ctx.restore();
//进行掏窟窿
ctx.clip();
ctx.clearRect(0,0,w,w);
}
//画虚线简单做法,有兼容性问题!
function drawSimpleUnreal(ctx){
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
//画布增强功能(注意兼容性,嵌入到ios safari4.3.3有问题!)http://msdn.microsoft.com/zh-cn/library/ie/dn265037(v=vs.85).aspx
//IE11+/safari7+
//ctx.setLineDash([12,3,3,3]); //创建12像素长,间隔为3像素 + 3像素长,间隔为3像素的点划线
ctx.setLineDash([5,5]); //创建5像素长,间隔为5像素的虚线
//横线
ctx.moveTo(0, half);
ctx.lineTo(w, half);
//竖线
ctx.moveTo(half, 0);
ctx.lineTo(half, w);
//交叉线1
ctx.moveTo(0, 0);
ctx.lineTo(w, w);
//交叉线2
ctx.moveTo(0, w);
ctx.lineTo(w, 0);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
</script>
</body>
</html>