canvas 2d基础

其他 2020-03-17 10:15:02 阅读次数: 0
绘制直线
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    canvas{
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <canvas id="myid" width="500" height="500">
    您的浏览器不支持canvas，请更换浏览器！
  </canvas>
</body>
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");
  context.beginPath();// 开启一条路径
  context.moveTo(100,100);// (x,y) 起点
  context.lineTo(200,100);// 终点
  context.lineWidth = 20;// 线宽度
  context.strokeStyle = "red";// 颜色
  context.lineCap = "square";// butt round square
  context.stroke();// 绘制

  context.beginPath();// 重新启动一条路径
  context.moveTo(100,200);// (x,y) 起点
  context.lineTo(200,200);// 终点
  context.strokeStyle = "blue";
  context.lineCap = "butt";
  context.stroke();
</script>
</html>

在这里插入图片描述

绘制三角形
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");
  context.beginPath();// 开启一条路径
  context.moveTo(100,100);// (x,y) 起点
  context.lineTo(100,200);// 开始画线了
  context.lineTo(200,100);
  context.lineTo(100,100);
  context.closePath();// 把图形闭合,不要上面一句(100,100)，它也会形成三角
  context.fillStyle = "red";// 设置填充样式
  context.lineWidth = 10;
  context.fill();// 填充
  context.stroke();// 画完
</script>

在这里插入图片描述

绘制长方形
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");
  // 第一种方式
  // context.beginPath();// 开启一条路径
  // context.moveTo(100,100);// (x,y) 起点
  // context.lineTo(200,100);
  // context.lineTo(200,200);
  // context.lineTo(100,200);
  // context.closePath();
  // context.stroke();

  // 第二种方式
  // context.beginPath();
  // context.rect(100,100,100,100);// (x,y,x的长度,y的长度)
  // context.stroke();

  //第三种方式
  context.beginPath();
  context.strokeStyle = "red";
  context.fillStyle = "yellow";
  context.strokeRect(100,100,100,100);// （x坐标，y坐标，x的长度，y的长度）
  context.fillRect(200,200,100,100);// 填充：(x,y,x的长度,y的长度)
  context.stroke();
</script>

在这里插入图片描述

绘制多个长方形
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");
  var arr = ["red","blue","yellow","gray"];
  for(let i = 0; i < arr.length; i++) {
    context.beginPath();
    context.fillStyle = arr[i];
    context.fillRect(100 + i * 20, 100 + i * 20, 200, 100);
  }

</script>

在这里插入图片描述

绘制国际棋盘
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    canvas{
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <canvas id="myid" width="800" height="800">
    您的浏览器不支持canvas，请更换浏览器！
  </canvas>
</body>
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");
  for(let x = 0; x < 800; x += 200) {
    for(let y = 0; y < 800; y += 200) {
      context.beginPath();
      context.fillRect(x, y, 100, 100);
      context.fillRect(x + 100, y + 100, 100, 100);
    }
  }

</script>
</html>

在这里插入图片描述
在这里插入图片描述

绘制圆
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");
  context.beginPath();
  context.arc(100,100,50,0,2*Math.PI);// 圆心（100,100）半径50，开始角0度，结束角2*PI
  context.stroke();
  context.beginPath();
  context.arc(300,100,50,0,Math.PI,false);// 最后一个参数false为顺时针，true为逆时针
  context.stroke();

</script>

在这里插入图片描述

绘制太极八卦
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    canvas{
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <canvas id="myid" width="400" height="400">
    您的浏览器不支持canvas，请更换浏览器！
  </canvas>
</body>
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");

  // 绘制背景
  context.beginPath();
  context.fillStyle = "gray";
  context.fillRect(0,0,canvas.width,canvas.height);// 画布变灰色

  // 左边黑色半圆
  context.beginPath();
  context.fillStyle = "black";
  context.arc(200,200,200,Math.PI*0.5,Math.PI*1.5);
  context.fill();

  // 右边白色半圆
  context.beginPath();
  context.fillStyle = "white";
  context.arc(200,200,200,Math.PI*1.5,Math.PI*0.5);
  context.fill();

  // 上面黑色大圆
  context.beginPath();
  context.fillStyle = "black";
  context.arc(200,100,100,0,Math.PI*2);
  context.fill();

  // 下面白色大圆
  context.beginPath();
  context.fillStyle = "white";
  context.arc(200,300,100,0,Math.PI*2);
  context.fill();

  // 上面白色小圆
  context.beginPath();
  context.fillStyle = "white";
  context.arc(200,100,20,0,Math.PI*2);
  context.fill();

  // 下面黑色小圆
  context.beginPath();
  context.fillStyle = "black";
  context.arc(200,300,20,0,Math.PI*2);
  context.fill();

</script>
</html>

在这里插入图片描述

绘制文字
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");
  context.beginPath();
  // context.strokeText("hello world", 100, 100);
  // context.textAlign = "center";// 居中对齐
  // context.textBaseline = "top";
  context.font = "italic 50px Arial";
  context.fillText("hello world", 250, 250);

  // x的参照线
  context.beginPath();
  context.moveTo(250,0);
  context.lineTo(250,500);
  context.stroke();

  // y的参照线
  context.beginPath();
  context.moveTo(0,250);
  context.lineTo(500,250);
  context.stroke();

  /*
    文字水平对齐
    textAlign: left center right
   */
  /*
    文字垂直对齐
    textBaseLine: top middle bottom
    alphabetic(拉丁文) ideographic(汉字)
    hanging(印度文字)
   */
</script>

在这里插入图片描述

设置渐变色
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");
  // 线性渐变
  // context.beginPath();
  // var gradientColor = context.createLinearGradient(0,0,500,0);// (0,0) --> (400,0)的渐变
  // gradientColor.addColorStop(0,"blue");//0-1之间，这边给了三个渐变色，当然可以给多个渐变
  // gradientColor.addColorStop(0.5,"yellow");
  // gradientColor.addColorStop(1,"green");
  // context.fillStyle = gradientColor;
  // context.fillRect(0,0,500,500);
  // 径向渐变
  context.beginPath();
  // 第一个圆（250,250）半径50，第二个圆（250,250），半径200
  var gradientColor = context.createRadialGradient(250,250,50,250,250,200);
  gradientColor.addColorStop(0,"red");
  gradientColor.addColorStop(0.5,"yellow");
  gradientColor.addColorStop(1,"pink");
  context.fillStyle = gradientColor;
  context.fillRect(0,0,500,500);
</script>

线性渐变
在这里插入图片描述
径向渐变
在这里插入图片描述

绘制阴影
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");
  context.beginPath();
  context.shadowBlur = 10;// 阴影的模糊程度
  context.shadowColor = "red";
  context.shadowOffsetX = -10;// 阴影，简单说就是左右，左为负，右为正
  context.shadowOffsetY = 10;// 阴影，简单说就是上下，上为负，下为正
  context.fillRect(100,100,100,100);
</script>

在这里插入图片描述

图形变换
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");
  context.beginPath();
  // context.translate(100,100);// x轴平移100,y轴平移100
  // context.rotate(Math.PI/4);// 旋转四十五度
  // context.scale(2,2)// 缩放，x轴缩放2倍，y轴缩放2倍
  // 上面的都是针对于所有canvas上的图形，都会受到影响
  context.fillRect(100,0,50,50);
</script>
状态的保存和获取
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");

  context.beginPath();
  context.save();//++++++++++++第一次 保存没有平移旋转的状态
  context.translate(100,0);//平移
  context.rotate(Math.PI/4);// 旋转45度
  context.save();//++++++++++++第二次 平移旋转的状态
  context.fillRect(100,0,50,50);
  context.restore();//++++++++++++第一次 重新把这个状态获取到
  context.fillRect(0,0,50,50);
  context.restore();//++++++++++++第二次，会把第二次的获取到，可以设置多个save
  context.fillRect(0,0,50,50);
</script>

在这里插入图片描述

贝塞尔曲线
<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");

  context.beginPath();
  context.moveTo(0,0);
  context.quadraticCurveTo(500,0,500,500);// 两次贝塞尔曲线的坐标
  context.stroke();
  context.beginPath();
  context.moveTo(0,0);
  context.bezierCurveTo(500,0,0,500,500,500);// 三次贝塞尔曲线的坐标
  context.stroke();
</script>

在这里插入图片描述
如果看不明白的，可以登录一个网站自己去看看
https://cubic-bezier.com
在这里插入图片描述

<script>
  // 获取canvas
  var canvas = document.getElementById("myid");
  // 获取context上下文--> 用于储存操作步骤
  var context = canvas.getContext("2d");

  // 左上右下的贝塞尔曲线
  context.beginPath();
  context.moveTo(0,0);
  context.bezierCurveTo(500*.86,500*.19,500*.1,500*.74,500,500);

  // 左下右上的贝塞尔曲线
  context.moveTo(0,500);
  context.bezierCurveTo(500*.11,500*.73,500*.85,500*.39,500,0);
  context.stroke();
</script>

在这里插入图片描述

痴心的萝卜
发布了56 篇原创文章 · 获赞 20 · 访问量 7398
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_36826618/article/details/102676103
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022