canvas画⽥字格与⽶字格
项⽬中最近⽤到了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 = ElementById('cs');
if (Context) {
var ctx = Context('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.lineTo(w, half);
/
/竖线
ctx.lineTo(half, w);
//交叉线1
ctx.lineTo(w, w);
//交叉线2
//交叉线2
ctx.lineTo(w, 0);
ctx.stroke();
ctx.closePath();
}
//画虚线，兼容性没问题！
function drawUnReal(ctx) {
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
l = w / 5; //横线路径
for (var i = 0; i < l; i += 2) {
ctx.lineTo(i * span, half);
}
//竖线路径
for (var i = 0; i < l; i += 2) {
ctx.lineTo(half, i * span);
}
l = il(w * Math.SQRT2 / 5);
//交叉线1
for (var i = 0; i < l; i += 2) {
ctx.lineTo(0, -half * Math.SQRT2 + i * span);
//交叉线2
for (var i = 0; i < l; i += 2) {
ctx.lineTo(0, -half * Math.SQRT2 + i * span);
//统⼀描边节省性能！
ctx.stroke();
}
//画虚线——掏窟窿作法
function drawUnRealNB(ctx) {
drawReal(ctx);
//画窟窿
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
l = w / 5; //横线路径
for (var i = 1; i < l; i += 2) {
<(i*span,half-2,span,3);
<(i*span,half-2,span,3);
}
//竖线路径
for (var i = 1; i < l; i += 2) {
<(half-2,i*span,3,span);
}
l = il(w * Math.SQRT2 / 5);
//交叉线1
for (var i = 1; i < l; i += 2) {
<(-2,-half * Math.SQRT2+i*span,3,span);
}
//交叉线2
for (var i = 1; i < l; i += 2) {
<(-2,-half * Math.SQRT2+i*span,3,span);
}
//进⾏掏窟窿
ctx.clip();
ctx.clearRect(0,0,w,w);
}
//画虚线简单做法，有兼容性问题！
function drawSimpleUnreal(ctx){
ctx.save();
ctx.lineWidth = 1;
ctx.beginPath();
//画布增强功能(注意兼容性，嵌⼊到ios safari4.3.3有问题！)msdn.microsoft/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像素的虚线
canvas动画//横线
ctx.lineTo(w, half);
//竖线
ctx.lineTo(half, w);
//交叉线1
ctx.lineTo(w, w);
/
/交叉线2
ctx.lineTo(w, 0);
ctx.stroke();
ctx.closePath();
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。