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

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

2019-01-28 15:22:04王旭
  •            context.beginPath();   
  •         context.moveTo(300,100);            context.lineTo(500,300);   
  •         context.lineTo(300,500);            context.lineJoin = "bevel";   
  •         context.lineWidth = 20;            context.strokeStyle = "blue";   
  •         context.stroke();      
  •         context.beginPath();            context.moveTo(500,100);   
  •         context.lineTo(700,300);            context.lineTo(500,500);   
  •         context.lineJoin = "round";            context.lineWidth = 20;   
  •         context.strokeStyle = "black";            context.stroke();   
  •     }    </script>   
  • </body>    </html>  

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

    看不清的童鞋自己放大网页或者自己将代码的线宽调宽一点。
    这里有一个很隐蔽的属性，就是当lineJoin设置为miter时（默认），会解锁一个成绩，可以使用miterLimit属性。
    举个例子看看。

    JavaScript Code复制内容到剪贴板
    1. <!DOCTYPE html>    <html lang="zh">   
    2. <head>        <meta charset="UTF-8">   
    3.     <title>miterLimit</title>    </head>   
    4. <body>    <div id="canvas-warp">   
    5.     <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">            你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    • 相关文章 大家在看