返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

HTML5 Canvas的常用线条属性值总结

2019-01-28 15:22:04王旭

运行结果：
2016317114136241.jpg (850×500)

这里我还做了两条平行线做一下参考，这样一眼就能看清lineCap三个值的特点。但要注意，这个帽子只在线条的端点处起作用，哪怕是折点很多的折线，也仅仅是在开始和终止的两个端点带帽子。如果想改变线条折点(两个线段的连接处)的样式，那就要用到下面的lineJoin属性。
线条的连接lineJoin

废话不多说，直接上代码看效果。这段代码改自4-3，只是设置了一下连接的属性。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>    <html lang="zh">   
  2. <head>        <meta charset="UTF-8">   
  3.     <title>线条的连接</title>    </head>   
  4. <body>    <div id="canvas-warp">   
  5.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">            你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  6.     </canvas>    </div>   
  7.    <script>   
  8.     window.onload = function(){            var canvas = document.getElementById("canvas");   
  9.         canvas.width = 800;            canvas.height = 600;   
  10.         var context = canvas.getContext("2d");      
  11.         context.beginPath();            context.moveTo(100,100);   
  12.         context.lineTo(300,300);            context.lineTo(100,500);   
  13.         context.lineJoin = "miter";            context.lineWidth = 20;   
  14.         context.strokeStyle = "red";            context.stroke();   
相关文章 大家在看