canvas绘制七巧板

2024-12-02 04:07:11

效果如下所示：

代码分享：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas七巧板</title>
</head>
<body>
  <canvas id="canvas" style=" border: 1px solid #aaa;display:block;margin:50px auto;"></canvas>
  <script type="text/javascript">
    var tangram = [
      {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
      {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},
      {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},
      {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
      {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
      {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
      {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}
    ]
//    定义一个存放绘制路径和颜色的数组
    window.onload=function (){
      var canvas=document.getElementById('canvas');
//      获取canvas
      canvas.width = 800;
      canvas.height = 800;
//      定义画布的宽高
      var context=canvas.getContext('2d');
//      创建画布
      for( var i=0; i<tangram.length; i++){
        draw(tangram[i],context);
//        遍历数组tangram执行函数draw

      }
//      draw这个函数
     function draw(piece,cxt){
        cxt.beginPath();
//        开始路径的创建
        cxt.moveTo( piece.p[0].x , piece.p[0].y );
//        从这个坐标开始
        for( var i=1; i<piece.p.length; i++)
//          遍历数组中的p属性
          cxt.lineTo(piece.p[i].x , piece.p[i].y);
//        画路径到这个坐标
          cxt.closePath();
//          关闭这条打开的路径

          cxt.fillStyle = piece.color;
          cxt.fill();
//          给绘制的形状填充颜色
     }
    }
  </script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

canvas实现图像截取功能

本文实例为大家分享了canvas图像截取的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-图像截取</title> <style> canvas{ border: 1px dashed red; float: left; position: r
canvas实现钟表效果

效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas画钟表</title> <style> body{ background: #fc0; } #canvas1{ background: #fff; } </style> </head> <body> <can
canvas实现探照灯效果

canvas中的clip()方法用于从原始画布中剪切任意形状和尺寸.一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域) 也可以在使用clip()方法前通过使用save()方法对当前画布区域进行保存,并在以后的任意时间通过restore()方法对其进行恢复接下来使用clip()方法实现一个探照灯效果 <button id="btn">变换</button> <button id="con">
canvas实现粒子时钟效果

前面的话本文将使用canvas实现粒子时钟效果效果展示点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组通过遍历数字点阵的二维数组,当该位置的值为1时,则绘制一个粒子,否则不绘制将绘制数字的函数命名为renderDigit().在该函数中,将粒子绘制为一个小圆.小圆的半径为R,小圆所占据的矩形宽(高)为2(R+1).由于数字点阵是10*7的二维数组,所以一个数字的宽度为14(R+1),高度为20(
canvas实现图像放大镜

本文实例为大家分享了canvas实现图像放大镜的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-放大镜</title> <style> body{ padding: 0px; margin: 0px; } #canvas{ border: 1p
canvas实现动态小球重叠效果

前面的话在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果静态小球首先,生成随机半径.随机位置的50个静态小球 <button id="btn">按钮</button> <canvas id="canvas" width="500" height="300" style=&quo
canvas的神奇用法

canvas有一个神奇的方法getImageData这个玩意.它可以获取canvas内图像的没一个像素点的颜色值获取,而且可以改变. 如果你有各种滤镜的算法.那么用canvas就可以实现图片的滤镜转化,可以做成类似美图秀秀那样的功能. 使用方法: 1:先将图片导入画布. 2:var canvasData = context.getImageData(0, 0, canvas.width, canvas.height); //用这个将图片每个像素点的信息获取出来,得到一个数组.注意得到的信息不是
Canvas实现动态的雪花效果

效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas</title> <style type="text/css"> *{ margin: 0; padding: 0; } html, body{ height: 100%; } #myCanvas{ background-colo
js Canvas绘制圆形时钟教程

本文实例为大家分享了Canvas绘制圆形时钟的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-clock</title> </head> <body> <canvas id="canvas" width=&
canvas实现十二星座星空图

效果如下: 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas星座</title> <style> * { margin: 0; padding: 0; } #box{ margin:10px 0 0 10px;; } input{ outline: none; font

canvas绘制七巧板

相关推荐

随机推荐