Canvas绘图详解-CSDN博客

本文深入讲解Canvas绘图技术，涵盖基本形状如矩形、圆弧的绘制，路径绘制技巧，以及如何利用Canvas处理图片和视频内容。通过实例代码，读者可以学习到不同绘图方法的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas 默认样式的宽度和高度是 300px * 150px

参考链接：canvas参考地址

Canvas 画布

canvas drawImage() 方法绘制图片与视频

<div>

</div>

<div>

</div>

<div>

</div>

js实现：

//---------------矩形

let arr = [456, 190, 627, 406]

var canvas = document.getElementById('myCanvas')

var ctx = canvas.getContext('2d')

ctx.strokeStyle = "#8aff8a"

ctx.lineWidth = 2

ctx.strokeRect(arr[0]/2,arr[1]/2,(arr[2]-arr[0])/2,(arr[3]-arr[1])/2)

//strokeRect（）方法绘制一个矩形（不填充）笔划的默认颜色是黑色 x,y,width,height

ctx.strokeRect(100,80,120,80) //居中显示

//true表示逆时针，false表示顺时针，默认值为false，即顺时针

//圆形 arc（）方法创建一个弧/曲线（用于创建圆或圆的一部分） (x,y,r, 0, Math.PI * 2 , true)

var c = document.getElementById("points")

var cx = c.getContext("2d");

cx.beginPath();

cx.arc(100, 75, 50, 0, 2 * Math.PI,true)

//stroke 路径 fill()填充

cx.stroke()

//绘制路径

var c = document.getElementById("Canvas");

var ctx = c.getContext("2d");

// ctx.beginPath()

//1.直接连线 moveTo() 起始点 lineTo() 连线点

// ctx.moveTo(20, 20);

// ctx.lineTo(20, 100);

// ctx.lineTo(70, 100);

// ctx.strokeStyle = "red"

// ctx.stroke();

//2.点统一放入数组循环得到每个点 forEach((item,index) => {})

let points = [[20,20],[20,100],[70,100],[80,200]]

ctx.beginPath()

ctx.moveTo(points[0],points[1])

points.forEach((v,i) => {

ctx.lineTo(v[0],v[1])

if(i === points.length - 1) {

ctx.lineTo(points[0][0], points[0][1])

}

})

ctx.strokeStyle = "red"

ctx.stroke();

}

<img width="200" height="200" src='https://www.runoob.com/wp-content/uploads/2013/11/img_the_scream.jpg'/>
<canvas width="200" height="200" id='myCanvas'></canvas>
// canvas中绘制图片

   // onload 事件会在页面或图像加载完成后立即发生
   let img = document.getElementById('img')
   console.log('img', img, img.width, img.height)
   let imgCtx = document.getElementById('myCanvas')
   let imgs = imgCtx.getContext('2d')
   img.onload = function() {
       console.log('图片加载完成')
       imgs.drawImage(img, 0, 0, img.width, img.height)
   }
// drawImage(image, dx, dy) 在画布指定位置绘制原图
// drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
// drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分

<video src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" width="270" controls autoplay muted id='video1'></video>
<br>
<canvas id="myCanvas1" width="270" height="135" style="border:1px solid black;">
Your browser does not support the HTML5 canvas tag.
</canvas>
// canvas绘制视频
let timer = null
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas1");
let ctx1=c.getContext('2d');
v.addEventListener('play',function() {
   console.log('play')
   timer = window.setInterval(() => {
       ctx1.drawImage(v, 0, 0, 270, 135)
   },20)
}
)

v.addEventListener('pause', function () {
console.log('pause')
   window.clearInterval(timer)
})