canvas画布

&小胖&

于 2021-11-13 20:34:28 发布

阅读量273

点赞数

分类专栏： js css html 文章标签： html5 javascript css3

本文链接：https://blog.csdn.net/a2739294436/article/details/121308218

版权

js 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5 Canvas的图形绘制方法，包括获取DOM元素、设置坐标、线条样式、填充颜色、阴影效果、图形绘制如矩形、圆形、扇形以及文字和图片的处理。此外，还展示了如何进行图形的剪切、映射、旋转等操作，以及实现渐变和图片平铺效果。通过实例代码展示每种操作的实现。

摘要由CSDN通过智能技术生成

一、语法

  //获取dom元素
  let cas = document.querySelector('选择器')

  // 获取上下文对象
  let ctx = vas.getContext('2d')

  // 设置初始坐标
  ctx.moveTo(100,100)

  // 设置终止位置
  ctx.lineTo(300,100)

  // 指定线条的颜色
  ctx.strokeStyle='green'
  
  //缩放
  ctx.scale(x,y);
 
  //旋转
  ctx.rotate(20*Math.PI/180);    //20*Math.PI/180   表示旋转20度

  //映射位置
  ctx.translate(x,y);
  
  //综合体现
  context.transform(a,b,c,d,e,f);   a	水平缩放绘图  b	水平倾斜绘图
                                    c	垂直倾斜绘图  d	垂直缩放绘图
                                    e	水平移动绘图  f	垂直移动绘图

  //修改线条的宽度，不用写单位
  ctx.lineWidth = 2

  // 指定线条末端样式
  ctx.lineCap = 'round'   //round  圆角   square  正方形  butt  默认值
                          // "round" 和 "square" 会使线条略微变长。

  // 指定线段交接处的样式
  ctx.lineJoin = 'round'   // round 圆角  bevel 斜切角  miter  直角 默认值
  
  // 实现虚线
  ctx.setLineDash([1,3,10])  

  // 以描边的进行图形绘制
  ctx.stroke()

  // 设置填充的颜色
  ctx.fillStyle = 'red'

  // 以填充的进行图形绘制
  ctx.fill()

  //闭合路径
  ctx.closePath()

  //设置阴影模糊程度
	ctx.shadowBlur=20

  // 设置阴影颜色
    ctx.shadowColor="颜色"
  
  // 设置阴影横向偏移
    ctx.shadowOffsetX=20;

  // 设置阴影纵向偏移
    ctx.shadowOffsetY=20;

  //绘制矩形
	ctx.fillRect(x,y,宽,高)   实心
    ctx.clearRect(x,y,宽,高);   删除的矩形面积 一般写在fillRect后
    ctx.rect(x,y,宽,高)       空心

  //绘制圆形
    ctx.arc(x,y,r,start,end,flag)      //flag判断转的方向   true为顺时针   false为逆时针
									   // start为起始角  end为终止角  r为半径
  //绘制图片
	ctx.drawImage(img,x,y,宽,高)        //img  绘制图片地址

  //设置水平对齐样式
  ctx.textAlign = 'center'  //与设置的坐标位置有关 
                                center 居中  left 左对齐  right 右对齐
  
  //绘制文字
	ctx.fillText(text,x,y)              //text 要写的文字
  
   //创建线性的渐变对象
      ctx.createLinearGradient(x, y, x1, y1)   //x1为结束x轴   y1为结束的y轴

   // 实现图片重复
      ctx.createPattern(img, "repeat");  //  repeat	默认。该模式在水平和垂直方向重复。
                                             repeat-x	该模式只在水平方向重复。
                                             repeat-y	该模式只在垂直方向重复。
                                             no-repeat	该模式只显示一次（不重复）。

  注意：x：x轴坐标  y：y轴坐标  宽：宽度  高：高度

二、操作

1.绘制实心矩形+阴影+删除部分矩形

<script>
  let vas = document.querySelector('#vas')
  let ctx = vas.getContext('2d')
  ctx.shadowBlur = 20;
  ctx.shadowColor = 'black';
  ctx.shadowOffsetX=20;
  ctx.shadowOffsetY=20;
  ctx.fillStyle = 'blue';
  ctx.fillRect(20, 20, 100, 80);
  ctx.clearRect(20,20,100,50);
</script>

实现

2.剪切矩形

<script>
  let vas = document.getElementById("vas");
  let ctx = vas.getContext("2d");
  // 剪切矩形区域
  ctx.rect(50, 20, 200, 120);
  ctx.stroke();
  ctx.clip();
  // 在 clip() 之后绘制绿色矩形
  ctx.fillStyle = "green";
  ctx.fillRect(0, 0, 150, 100);
</script>

实现

3.绘制空心矩形

<script>
  let vas = document.querySelector('#vas')
  let ctx = vas.getContext('2d')
  ctx.rect(100,100,300,100)  
  ctx.strokeStyle = 'green'
  ctx.lineWidth = 10 
  ctx.stroke()
</script>

实现

4.绘制有边框的实心矩形

<script>
  let vas = document.querySelector('#vas')
  let ctx = vas.getContext('2d')
  ctx.rect(100,100,300,100)  // 参数为  x , y , w , h
  ctx.strokeStyle = 'green'
  ctx.lineWidth = 10 
  ctx.stroke()
  ctx.fillStyle ='red'
  ctx.fill()
</script>

实现

5.绘制圆形

<script>
  let vas = document.querySelector('#vas')
  let ctx = vas.getContext('2d')
  ctx.arc(200,200,100,0,2*Math.PI)
  ctx.stroke()
  ctx.fill()
</script>

实现

6.绘制扇形

<script>
  let vas = document.querySelector('#vas')
  let ctx = vas.getContext('2d')
  ctx.beginPath()
  ctx.moveTo(200,200)
  ctx.arc(200,200,100,-Math.PI/3,Math.PI/3)
  ctx.closePath()
  ctx.stroke()
  // ctx.fill()  //填充图形
</script>

实现

7.绘制添加图片

<script>
  let vas = document.querySelector('#vas')
  let img = document.querySelector('img')
  let ctx = vas.getContext('2d')
  window.onload = function(){
    　　ctx.drawImage(img,10,10,100,100)
  }
</script>

8.绘制文字

<script>
  let vas = document.querySelector('#vas')
  let ctx = vas.getContext('2d')
  ctx.font = '30px bolder 黑体'
  ctx.fillStyle = 'red'
  ctx.textAlign = 'center'
  ctx.fillText('文字',200,200)
</script>

实现

9.实现渐变的文字

<script>
  let vas = document.querySelector('#vas')
  let ctx = vas.getContext('2d')
  ctx.font = '30px bolder 黑体'

  var gradient = ctx.createLinearGradient(0, 0, 170, 0);
  gradient.addColorStop("0", "magenta");
  gradient.addColorStop("0.5", "blue");
  gradient.addColorStop("1.0", "red");

  // 用渐变进行填充
  // ctx.strokeStyle = gradient;
  // ctx.strokeText('w e n z i',100,100)
  ctx.fillStyle = gradient;
  ctx.fillText('w e n z i',100,100)
</script>

实现

10.实现图片的平铺

<script>
  let vas = document.getElementById("vas");
  let ctx = vas.getContext("2d");
  let img = document.querySelector("img");
  window.onload = function () {
      let pat = ctx.createPattern(img, "repeat");
        ctx.rect(0, 0, 150, 100);
        ctx.fillStyle = pat;
        ctx.fill();
  }
</script>

实现

11.矩形的映射,放大，旋转

<script>

let vas=document.getElementById("vas");
let ctx=vas.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(30,70);
ctx.scale(2,2);
ctx.rotate(20*Math.PI/180);
ctx.fillRect(10,10,100,50);

</script>

实现

12.矩形的映射,放大,旋转综合实现

<script>

let vas=document.getElementById("myCanvas");
let ctx=vas.getContext("2d");

ctx.fillStyle="yellow";
ctx.fillRect(100,100,250,100)

ctx.transform(1,0.5,-0.5,1,100,100);
ctx.fillStyle="red";
ctx.fillRect(100,100,250,100);

</script>

实现