javascript canvas show circle picture

作者: admin 分类: JavaScript 发布时间: 2015-05-04 10:18 ė4,776 浏览数 6没有评论

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');

          var thumbImg = document.createElement('img');

          thumbImg.src = 'http://s1.sinaimg.cn/orignal/6e0be9fbh94318b5f9120&690';
          thumbImg.onload = function() {
              ctx.save();
              ctx.beginPath();
              ctx.arc(50, 50, 50, 0, Math.PI * 2, true);
              ctx.closePath();
              ctx.clip();

              ctx.drawImage(thumbImg, 0, 0, 100, 100);

              ctx.beginPath();
              ctx.arc(0, 0, 50, 0, Math.PI * 2, true);
              ctx.clip();
              ctx.closePath();
              ctx.restore();
          };

        }
      }


    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Canvas tutorial</title>

function draw(){

var canvas = document.getElementById('tutorial');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

var thumbImg = document.createElement('img');

thumbImg.src = 'http://s1.sinaimg.cn/orignal/6e0be9fbh94318b5f9120&690';

thumbImg.onload = function() {

ctx.save();

ctx.beginPath();

ctx.arc(50, 50, 50, 0, Math.PI * 2, true);

ctx.closePath();

ctx.clip();

ctx.drawImage(thumbImg, 0, 0, 100, 100);

ctx.beginPath();

ctx.arc(0, 0, 50, 0, Math.PI * 2, true);

ctx.clip();

ctx.closePath();

ctx.restore();

};

}

</script>

canvas { border: 1px solid black; }

</style>

</head>

</body>

</html>

只回答业务咨询

学习日记，兼职软件设计，软件修改，毕业设计。

本文出自学习日记，转载时请注明出处及相应链接。

本文永久链接: https://www.softwareace.cn/?p=1310

« 为什么要设置“Ctrl+Alt+Del 登录”的方式

VMware Workstation 11.0.0 注册码/key »

javascript canvas show circle picture

发表评论取消回复

分类目录

业务咨询站长

javascript canvas show circle picture

发表评论 取消回复

分类目录

业务咨询站长

发表评论取消回复