首页 > 代码库 > canvas线性变换、颜色和样式选择
canvas线性变换、颜色和样式选择
1、应用不同的线型
ctx.lineWidth = value; 线条的宽度，默认为1
ctx.lineCap = type; 设置端点样式， type默认为butt,可选值round,square,butt
ctx.lineJoin = type; 设置连接处样式，type默认为miter，可选值round，bevel，miter
ctx.miterLimit = value; 设置绘制交点的方式，miterLimit属性的作用是斜面的长度设置一个上线，默认为10，当斜面的长度达到线条宽度的10倍时，就会变为斜角，如果lineJoin属性值为round或bevel时，miterLimit属性无效。
a、ctx.lineCap
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width: 300px;}10 canvas{background: #fff;}11 </style>12 <script type="text/javascript">13 window.onload = function(){14 draw(); 15 };16 function draw(){17 var ctx = document.getElementById(‘myCanvas‘).getContext(‘2d‘);18 19 var lineCap = [‘butt‘,‘round‘,‘square‘];20 //绘制参考线21 ctx.strokeStyle = ‘red‘;22 ctx.beginPath();23 ctx.moveTo(10,10);24 ctx.lineTo(10,150);25 ctx.moveTo(150,10);26 ctx.lineTo(150,150);27 ctx.stroke();28 //绘制直线段29 ctx.strokeStyle = ‘blue‘;30 for( var i=0; i<lineCap.length; i++){31 ctx.lineWidth = 20;32 ctx.lineCap = lineCap[i];33 ctx.beginPath();34 ctx.moveTo(10,30+i*50);35 ctx.lineTo(150,30+i*50);36 ctx.stroke();37 }38 39 }40 </script>41 </head>42 <body>43 <div id="div1">44 <canvas id="myCanvas" width="300" height="300"></canvas>45 </div>46 </body>47 </html>
效果展示：
b、ctx.lineJoin
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width: 300px;}10 canvas{background: #fff;}11 </style>12 <script type="text/javascript">13 window.onload = function(){14 draw(); 15 };16 function draw(){17 var ctx = document.getElementById(‘myCanvas‘).getContext(‘2d‘);18 19 var lineJoin = [‘round‘,‘bevel‘,‘miter‘];20 ctx.strokeStyle = ‘red‘;21 22 for( var i=0; i<lineJoin.length; i++){23 ctx.lineWidth = 20;24 ctx.lineJoin = lineJoin[i];25 ctx.beginPath();26 ctx.moveTo(10+i*150,30);27 ctx.lineTo(100+i*150,30);28 ctx.lineTo(100+i*150,100);29 ctx.stroke();30 }31 32 }33 </script>34 </head>35 <body>36 <div id="div1">37 <canvas id="myCanvas" width="600" height="300"></canvas>38 </div>39 </body>40 </html>
效果展示：
c、miterLimit
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{padding: 0;margin:0;} 8 body{background: #1b1b1b;} 9 #div1{margin:50px auto; width: 300px;}10 canvas{background: #fff;}11 </style>12 <script type="text/javascript">13 window.onload = function(){14 draw(); 15 };16 function draw(){17 var ctx = document.getElementById(‘myCanvas‘).getContext(‘2d‘);18 ctx.translate(30,40);19 for( var i=0; i<10; i++){20 ctx.strokeStyle = ‘#FF5D43‘;21 ctx.lineWidth = 10;22 ctx.lineJoin = ‘miter‘;23 ctx.miterLimit = i*10;24 ctx.beginPath();25 ctx.moveTo(10,i*30);26 ctx.lineTo(100,i*30);27 ctx.lineTo(10,i*33);28 ctx.stroke();29 }30 31 }32 </script>33 </head>34 <body>35 <div id="div1">36 <canvas id="myCanvas" width="300" height="400"></canvas>37 </div>38 </body>39 </html>
效果显示：
canvas线性变换、颜色和样式选择
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。