canvas画田字格と米字格
4092 ワード
プロジェクトでは最近canvas画図の機能が使われており、主にフォントを描き、フォントのストロークを描き、アニメーションを実現しています.フォントの背景は田の字格あるいは米の字格あるいはピクチャーで、田の字格と米の字格の画法の小結だけでネットユーザーの参考に供します.主にcanvasの描画経路と線、マスク描画の機能を使用します.
<style type="text/css">
#div1 {
width: 400px;
height: 400px;
}
</style>
<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>
</code></pre>
<br/>
<br/>
</div>
</div>
</div>
</div>