UDN-企业互联网技术人气社区

板块导航

浏览  : 886
回复  : 0

[讨论交流] Java 设计模式 -- 命令模式

[复制链接]
呵呵燕的头像 楼主
发表于 2016-11-27 21:52:08 | 显示全部楼层 |阅读模式
  在 MDC canvas 教程 可以查看到 canvas 的更多信息。

  可以在 Canvas 中绘制有一定透明度的图形,如下所示。

  1.    <script>
  2.      var canvas = document.getElementById("mycanvas");
  3.      var mycontext = canvas.getContext("2d");

  4.      mycontext.beginPath();
  5.      mycontext.arc(40, 40, 25, 0, Math.PI * 2, true);
  6.      mycontext.closePath();
  7.      mycontext.fillStyle = "#f00";
  8.      mycontext.fill();

  9.      mycontext.beginPath();
  10.      mycontext.arc(70, 40, 25, 0, Math.PI * 2, true);
  11.      mycontext.closePath();
  12.      mycontext.fillStyle = "rgba(0,0,255,0.5)";
  13.      mycontext.fill();
  14. </script>
复制代码


  绘制的效果如下所示

h.png


  arc(x坐标,y坐标,半径,起始角度,终点角度,顺时针或逆时针绘制)

  关于透明度的使用,可以参见 styles and colors 。

  有三种方法设置 canvas 的大小。一种是直接给 canvas 指定 width 和 height 属性

  
  1.   <canvas width="200" height="200" id="mycanvas"></canvas>
复制代码

  其它两种都是通过 JavaScript 控制的

  1.   // 第一种

  2.   mycontext.width = 200;

  3.   mycontext.height = 200;

  4.   //第二种

  5.   mycontext.setAttribute("width", "200");

  6.   mycontext.setAttribute("height", "200");
复制代码


  当然,你可能想到,我直接利用 CSS 改变它的大小不是一样的吗?其实不是这样的,无论你是直接使用 CSS 控制它的大小,还是在 JavaScript 设置 CSS 属性,都不能实质上改变它的小,只能说 Canvas 被拉伸了或者说是收缩了。

  我们还可以创建渐变,利用 createLinearGradient(startX, startY, endX, endY) 方法。

  
g.jpg


  可以将我们的图片绘制在 Canvas 中,下面就用下面这张图片当做例子。

  1. <script>
  2.      var canvas = document.getElementById("mycanvas");
  3.      var mycontext = canvas.getContext("2d");

  4.      var img = new Image();
  5.      img.onload = function () {
  6.          mycontext.drawImage(img, 0, 0);
  7.      }
  8.      img.src = "one.jpg";

  9. </script>
复制代码


  这里我们设置当图像加载的时候,就利用 drawImage() 方法将图片绘制在 (0, 0) 的位置上。

f.png


  这是效果图,可见,这的确是图片的左上角部分,但是由于Canvas的宽高不够,所以将我们的图片进行了裁剪。这种效果可能不是我们想要的,所以我们可能用到 drawImage() 的另一种调用方式,这种参数接收 8 个参数,第一个参数当然是图片变量,接下来就是第一个四元参数 (sx, sy, sw, sh) 代表要捕获的图像数据的左上角位置及其宽度和高度,后一个四元参数 (dx, dy, dw, dh) 表示要在 canvas 元素中图像数据所要复制到的位置的左上角及其宽度和高度。

  1.   mycontext.drawImage(img, 400, 450, 200, 200, 0, 0, 200, 200);
复制代码

  这个时候的效果如下

e.png


  在 Canvas 中放置文本有两种方式 fillText() 和 strokeText() 使用方法和效果如下

  1.   mycontext.font = "25pt Arial";

  2.   mycontext.fillText("Hello canvas", 20, 50);

  3.   mycontext.strokeText("Hello canvas", 20, 100);
复制代码

  
d.png


  1. 原文作者:高华峰 来源:开发者头条
复制代码

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部