html5 canvas路径绘制2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >基本文件配置</ title > < script src="js/modernizr.js"></ script > </ head > < body > < p >lineCap定义上下文中线的端点:</ p > < p >butt端点是垂直于线段边缘的平直边缘</ p > < p >round端点是在线段边缘处以线宽为直径的半圆</ p > < p >square:端点是在选段边缘处以线宽为长,以一般线宽为宽的矩形</ p > < p >lineJoin定义了两条线相交产生的拐角</ p > < p >miter 在连接外边缘盐城详解</ p > < p >bevel。连接处是一个对角线斜角</ p > < p >round。连接处是一个圆</ p > < script type="text/javascript"> window.addEventListener('load',eventWindowLoaded,false); function eventWindowLoaded(){ canvasApp(); } function canvasSupport(){ return Modernizr.canvas; } function canvasApp(){ if(!canvasSupport()){ return; }else{ var theCanvas = document.getElementById('canvas') var context = theCanvas.getContext("2d") } drawScreen(); function drawScreen(){ //圆形端点,斜角连接 context.strokeStyle="pink"; context.lineWidth=10; context.lineJoin='bevel'; context.lineCap='round'; context.beginPath(); context.moveTo(0,0); context.lineTo(25,0); context.lineTo(25,25); context.stroke(); context.closePath(); //round圆形端点,斜角链接 context.beginPath(); context.moveTo(10,50); context.lineTo(35,50); context.lineTo(35,75); context.stroke(); context.closePath(); //butt平直的端点,round圆形的链接 context.lineJoin='round'; context.lineCap='butt'; context.beginPath(); context.beginPath(); context.moveTo(10,100); context.lineTo(35,100); context.lineTo(35,125); context.stroke(); context.closePath(); } } </ script > < canvas id="canvas" width="500" height="500"> 你的浏览器无法使用canvas 如有疑问加QQ:1035417613;小白童鞋;你的支持是我最大的快乐!! </ canvas > </ body > </ html > |
效果如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < title >基本文件配置</ title > < script src="js/modernizr.js"></ script > </ head > < body > < script type="text/javascript"> window.addEventListener('load',eventWindowLoaded,false); function eventWindowLoaded(){ canvasApp(); } function canvasSupport(){ return Modernizr.canvas; } function canvasApp(){ if(!canvasSupport()){ return; }else{ var theCanvas = document.getElementById('canvas') var context = theCanvas.getContext("2d") } drawScreen(); function drawScreen(){ //圆形端点,斜角连接 context.strokeStyle="pink"; context.lineWidth=10; context.lineJoin='bevel'; context.lineCap='round'; context.beginPath(); context.moveTo(50,20); context.lineTo(35,100); context.lineTo(55,150); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(25,65); context.lineTo(80,65); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(75,40); context.lineTo(60,100); context.lineTo(30,150); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(120,20); context.lineTo(120,150); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(100,55); context.lineTo(120,70); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(100,105); context.lineTo(120,80); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(140,20); context.lineTo(140,150); context.lineTo(180,150); context.lineTo(180,120); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(140,70); context.lineTo(160,55); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(140,85); context.lineTo(160,105); context.stroke(); context.closePath(); } } </ script > < canvas id="canvas" width="500" height="500"> 你的浏览器无法使用canvas 如有疑问加QQ:1035417613;小白童鞋;你的支持是我最大的快乐!! </ canvas > </ body > </ html > |
效果吐槽一下这字画的竟然和我写的一样丑T_T无语了
额,写上这一段的时候主要还是不明白,好多点反对是对我的随笔不满还是对我随笔质量的不满。。实际上我更多的把这个博客当成个人动态玩的。。。所以还是比较随意的。。。当然如果觉得写得有问题可以在下方评论写出改进建议。。。我会虚心接受,顺便可以知道自己的不足点。。。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步