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 = document.getElementById('cs');if (oCanvas.getContext) {var ctx = oCanvas.getContext('2d'),l = 0,w = oCanvas.width,half = w / 2,span = 5; //每条虚线的实线部分长度为5ctx.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);//交叉线1ctx.moveTo(0, 0);ctx.lineTo(w, w);//交叉线2ctx.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);//交叉线1for (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);//交叉线2for (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);//交叉线1for (var i = 1; i < l; i += 2) {ctx.rect(-2,-half * Math.SQRT2+i*span,3,span);}ctx.rotate(90 * Math.PI / 180);//交叉线2for (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);//交叉线1ctx.moveTo(0, 0);ctx.lineTo(w, w);//交叉线2ctx.moveTo(0, w);ctx.lineTo(w, 0);ctx.stroke();ctx.closePath();ctx.restore();}</script></body></html>

canvas画田字格与米字格相关推荐

html编写田字格,canvas画田字格与米字格
#div1 { width: 400px; height: 400px; } 转载自canvas画田字格与米字格你的浏览器不支持canvas! var oCanvas = document.getE ...
微信小程序中base64格式的小程序码通过canvas画出来无效
使用场景小程序中的文章详情页面有一个分享功能:用户点击分享按钮,生成一张分享图片(包括封面图,简介以及带有文章ID的小程序码),方便用户保存在本地. 问题说明小程序码通过后台接口获取,格式如下:' ...
关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网
小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...
python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
[html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
毛边效果 html,Html5中Canvas画线有毛边如何解决
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...

canvas画田字格与米字格

canvas画田字格与米字格相关推荐

最新文章

热门文章