canvas绘制虚线
2016-06-14 10:28
302 查看
一个绘制虚线的算法。很不错!来自《html5 canvas核心技术》一书。
实际上html5已经将绘制虚线纳入规范,使用setLineDash()就可以绘制虚线,参照
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
本文内容转载自http://blog.sina.com.cn/s/blog_6d0dc2a90102vcd4.html
var canvas = document.getElementByIdx_x_x_x("canvas"), ctx = canvas.getContext("2d"); function drawDashLine(ctx, x1, y1, x2, y2, dashLength){ var dashLen = dashLength === undefined ? 5 : dashLength, xpos = x2 - x1, //得到横向的宽度; ypos = y2 - y1, //得到纵向的高度; numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen); //利用正切获取斜边的长度除以虚线长度,得到要分为多少段; for(var i=0; i小于numDashes; i++){ if(i % 2 === 0){ ctx.moveTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i); //有了横向宽度和多少段,得出每一段是多长,起点 + 每段长度 * i = 要绘制的起点; }else{ ctx.lineTo(x1 + (xpos/numDashes) * i, y1 + (ypos/numDashes) * i); } } ctx.stroke(); } ctx.lineWidth = 2; ctx.strokeStyle = "#0000ff"; drawDashLine(ctx, 0, 0, 400, 400, 8)
实际上html5已经将绘制虚线纳入规范,使用setLineDash()就可以绘制虚线,参照
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
本文内容转载自http://blog.sina.com.cn/s/blog_6d0dc2a90102vcd4.html
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- HTML5调用摄像头实例
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 原生js结合html5制作小飞龙的简易跳球
- 使用canvas实现仿新浪微博头像截取上传功能
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- 基于HTML5的可预览多图片Ajax上传