首页 > 编程语言 > 详细

[Javascript] Drawing Styles on HTML5 Canvas

时间:2015-03-20 01:13:32      阅读:330      评论:0      收藏:0      [点我收藏+]
window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      width = canvas.width = 600,
      height = canvas.height = 600;
  
  context.lineCap = "round";
  context.lineJoin = "miter";
  context.miterLimit = 1;
  
  context.lineWidth = 20;
  context.strokeStyle = "#999999";
  draw();

  context.lineWidth = 1;
  context.strokeStyle = "#ff0000";
  draw();

  function draw() {
    context.beginPath();
    context.moveTo(50, 50);
    context.lineTo(150, 50);
    context.stroke();
    
    context.beginPath();
    context.rect(200, 200, 100, 100);
    context.stroke();
    
    context.beginPath();
    context.moveTo(390, 500);
    context.lineTo(400, 400);
    context.lineTo(410, 500);
    context.stroke();
  }
};

技术分享 If set miterLimit = 100: 技术分享

 

lineCap: http://www.w3schools.com/tags/canvas_linecap.asp

lineJoin: http://www.w3schools.com/tags/canvas_linejoin.asp

miterLimit: http://www.w3schools.com/tags/canvas_miterlimit.asp

https://egghead.io/lessons/javascript-drawing-styles-on-html5-canvas

 

[Javascript] Drawing Styles on HTML5 Canvas

原文:http://www.cnblogs.com/Answer1215/p/4352283.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!