绘制剪纸

最新推荐文章于 2020-12-05 21:57:37 发布

菜鸟的修炼

最新推荐文章于 2020-12-05 21:57:37 发布

阅读量377

点赞数

本文链接：https://blog.csdn.net/life91/article/details/72660242

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>绘制剪纸</title>
</head>
<body>
   <canvas id="canvas" style="border:1px solid red"></canvas>
   <script >
       var canvas=document.getElementById('canvas');
       canvas.width=800;
       canvas.height=800;
       var context =canvas.getContext('2d');
       context.fillStyle="yellow";
       context.fillRect(0,0,800,800);
       context.fill();

function draw() {
   context.clearRect(0, 0, 800,800);
   context.save();
   context.shadowColor = 'rgba(200, 200, 0, 0.5)';
   context.shadowOffsetX = 12;
   context.shadowOffsetY = 12;
   context.shadowBlur = 15;
   drawCutouts();
   strokeCutoutShapes();
   context.restore();
}
function drawCutouts() {
   context.beginPath();
   addOuterRectanglePath(); // CW
   addCirclePath();      // CCW
   addRectanglePath();   // CCW
   addTrianglePath();    // CCW
   context.fill(); // Cut out shapes
}
function strokeCutoutShapes() {
   context.save();
   context.strokeStyle = 'rgba(0,0,0,0.7)';
   context.beginPath();
   addOuterRectanglePath(); // CW
   context.stroke();
   context.beginPath();
   addCirclePath();
   addRectanglePath();
   addTrianglePath();
   context.stroke();
   context.restore();
}
function rect(x, y, w, h, direction) {
if (direction) { // CCW
      context.moveTo(x, y);
      context.lineTo(x, y + h);
      context.lineTo(x + w, y + h);
      context.lineTo(x + w, y);
      context.closePath();
}
else {
      context.moveTo(x, y);
      context.lineTo(x + w, y);
      context.lineTo(x + w, y + h);
      context.lineTo(x, y + h);
      context.closePath();
}
}
function addOuterRectanglePath() {
   context.rect(0, 0, 800, 800);
}
function addCirclePath() {
   context.arc(650, 650, 100, 0, Math.PI*2, true);
}
function addRectanglePath() {
   rect(50, 50, 200,200, true);
}
function addTrianglePath() {
   context.moveTo(600, 500);
   context.lineTo(190, 300);
   context.lineTo(100, 500);
   context.closePath();
}
   draw();
   </script>
</body>
</html>

菜鸟的修炼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
绘制剪纸

绘制剪纸 var canvas=document.getElementById('canvas'); canvas.width=800; canvas.height=800; var context =canvas.getContext('2d'); context.fillS
复制链接

扫一扫