html编写田字格,canvas画田字格与米字格

#div1 {

width: 400px;

height: 400px;

}

转载自canvas画田字格与米字格

你的浏览器不支持canvas!

var oCanvas = document.getElementById('cs');

if (oCanvas.getContext) {

var ctx = oCanvas.getContext('2d'),

l = 0,

w = oCanvas.width,

half = w / 2,

quarter = w / 4,

span = 5; //每条虚线的实线部分长度为5

ctx.strokeStyle = '#000';

ctx.lineWidth = 2;

//ctx.strokeRect(1, 1, w - 2, w - 2);

ctx.moveTo(1, 1);

ctx.lineTo(w-1, 1);

ctx.moveTo(1, w-1);

ctx.lineTo(w-1, w-1);

// ctx.moveTo(1, 1);

// ctx.lineTo(1, w-1);

ctx.moveTo(w-1, 1);

ctx.lineTo(w-1, w-1);

ctx.stroke();

//依次调用看效果!

//drawReal(ctx);

//drawUnReal(ctx);

//drawUnRealNB(ctx);

drawSimpleUnreal(ctx);

}

//画虚线简单做法，有兼容性问题！

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.strokeRect(quarter - 1, quarter - 1, half - 2, half - 2);

ctx.stroke();

ctx.closePath();

ctx.restore();

}

html编写田字格,canvas画田字格与米字格相关推荐

canvas画田字格与米字格
项目中最近用到了canvas画图的功能,主要利用它来描绘字体,并描绘字体的笔划,动画实现.字体背景为田字格或米字格或图片,仅以田字格与米字格的画法小结供网友参考. 主要用到canvas的画路径与描边. ...
使用canvas画折线图和曲线图
使用canvas画折线图和曲线图贝塞尔曲线如果想要在p0=>p2的过程中经过p1,那么需要计算出pc的值,在canvas之中作为控制点二次贝塞尔曲线转换为三次上面只是简单介绍,具体的参考文 ...
php画圆盘,用Canvas画个圆盘
需求的来源通常是工作,这次要完成功能核心是一个向量图,嗯...其实就是一个定制化的仪表盘,换做平时一个上午就能搞定,只要数据给到顺手测试了就交货,但这次却有些不一样,这次要完成的,是一个微信小程序.嗯 ...
微信小程序中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 ...

html编写田字格,canvas画田字格与米字格

html编写田字格,canvas画田字格与米字格相关推荐

最新文章

热门文章