当前位置：首页 > news >正文

html5新增特性之画布canvas的使用

news 来源：原创 2024/5/10 0:57:22

一、基本用法

二、canvas的使用

1、绘制一个矩形

填充矩形

轮廓矩形

2、清除画布区域

3、绘制一个圆

填充圆

轮廓圆

会移动的圆

4、渐变色绘制

线性渐变

径向渐变

5、绘制线段

绘制一个三角形

6、绘制图片

7、绘制视频

8、绘制文本

一、基本用法

1、获取canvas对象——获取画布
通过document.getElementById()等方法取得canvas对象。

var canvas = document.querySelector('canvas');

2、取得上下文(context)——获取画笔
图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”

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

3、定义填充样式

实心填充样式：

context.fillStyle='pink';

轮廓样式：

context.strokeStyle = 'pink'

4、绘制填充图形

绘制填充图形：

context.fill();

绘制边框图形：

context.stroke();

绘制填充矩形：

//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高
context.fillRect(10,10,100,100)

绘制轮廓矩形：

//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高
context.strokeRect(20, 20, 200, 200)

二、canvas的使用

1、绘制一个矩形

填充矩形

（1）获取画布

（2）获取画笔

（3）给图像设置填充样式

（4）绘制图形

<body>
  <!-- 画布元素-->
  <canvas width="400px" height="400px"></canvas>
  <script>
    //1、获取画布
    var canvas = document.querySelector('canvas')
    //2、获取画笔
    var context = canvas.getContext('2d')
    //3、给图形设置填充样式
    context.fillStyle = 'pink' //实心填充
    //4、绘制图形
    //fillRect有4个参数：x轴起始位置,y轴起始位置,宽,高 
    context.fillRect(20, 20, 200, 200)
  </script>
</body>

轮廓矩形

<body>
  <canvas width="400px" height="400px"></canvas>
  <script>
    //1、获取画布
    var canvas = document.querySelector('canvas')
    //2、获取画笔
    var context = canvas.getContext('2d')
    //3、给轮廓图形设置填充样式
    context.strokeStyle = 'pink'
    //4、给轮廓矩形设置线宽
    context.lineWidth = 8; //默认1px
    //5、绘制图形
    //strokeRect有4个参数：x轴起始位置,y轴起始位置,宽,高 
    context.strokeRect(20, 20, 200, 200)
  </script>
</body>

2、清除画布区域

可以选择清除部分区域，也可以清除全部区域，取决于我们设置的参数。

<body>
  <canvas width="400px" height="400px"></canvas>
  <script>
    //1、获取画布
    var canvas = document.querySelector('canvas')
    //2、获取画笔
    var context = canvas.getContext('2d')
    //3、给图形设置填充样式
    context.fillStyle = 'pink' //实心填充
    //4、绘制图形
    //fillRect有4个参数：x轴起始位置,y轴起始位置,宽,高 
    context.fillRect(20, 20, 200, 200)

    //清除画布部分区域
    //clearRect有4个参数：x轴起始位置,y轴起始位置,宽,高 
    context.clearRect(100,100,50,50);

    //清除画布全部区域
    // context.clearRect(0,0,400,400);
  </script>
</body>

3、绘制一个圆

需要给开始路径 context.beginPath() 和结束路径 context.closePath()，在开始路径和结束路径之间绘制圆。

填充圆

<body>
  <canvas width="600px" height="600px"></canvas>
  <script>
    //1、获取画布
    var canvas = document.querySelector('canvas')
    //2、获取画笔
    var context = canvas.getContext('2d')
    //3、需要给开始路径
    context.beginPath()
    //4、绘制圆
    //arc有6个参数：x轴开始位置,y轴开始位置,r半径,开始弧度,结束弧度,布尔值(true代表逆时针绘制,false代表顺时针绘制,默认false)
    context.arc(100, 100, 80, 0, Math.PI * 2, true)
    // 5、绘制圆的填充样式
	context.fillStyle='rgb(253, 153, 0)';
    // 6、绘制填充圆
	context.fill();
	// 7、需要给结束路径
	context.closePath();
  </script>
</body>

轮廓圆

绘制轮廓圆只需要把fill改成stroke即可。

<body>
  <canvas width="600px" height="600px"></canvas>
  <script>
    //1、获取画布
    var canvas = document.querySelector('canvas')
    //2、获取画笔
    var context = canvas.getContext('2d')
    //3、需要给开始路径
    context.beginPath()
    //4、绘制圆
    //arc有6个参数：x轴开始位置,y轴开始位置,r半径,开始弧度,结束弧度,布尔值(true代表逆时针绘制,false代表顺时针绘制,默认false)
    context.arc(100, 100, 80, 0, Math.PI * 2, true)
    // 5、绘制圆轮廓的样式
	context.strokeStyle='rgb(253, 153, 0)';
    //6、绘制轮廓圆
    context.stroke()
	// 7、需要给结束路径
	context.closePath();
  </script>
</body>