canvas画布创建图片

最新推荐文章于 2025-05-09 15:36:01 发布

原创最新推荐文章于 2025-05-09 15:36:01 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

该博客主要介绍了在HTML5中使用canvas进行绘图的相关操作。包括获取canvas元素、绘制画布上下文、创建图片对象、监听图片加载并以三种不同参数方式绘制图片，还给出了图片路径赋值的代码，最后展示了绘制圆和截取图片的操作。

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

获取元素
var can = document.getElementsByTagName(‘canvas’)[0];
绘制画布上下文
var context = can.getContext(‘2d’);
创建图片对象
var image = new Image();
监听图片加载
image.onload = function(){
绘制图片有三种情况使用其中的一种即可

1.三个参数第一个参数是绘制的图片对象
后两个参数是在画布上的起始点坐标
context.drawImage(image,50,50);

2.五个参数第一个参数是绘制的图片对象
二三个参数是在画布上的起始点坐标
四五个参数是画布上绘制图片大小
context.drawImage(image,50,50,300,300);

3.九个参数第一个参数是绘制的图片对象
二三个参数是在图片上截取的位置
四五个参数是图片截取的大小
六七个参数是在画布上的起始点坐标
八九个参数是画布上绘制的图片大小
context.drawImage(image,50,50,100,100,200,0,400,600);

}
给图片路径赋值
image.src = ‘img/1.png’;

绘制一个圆
context.arc(100,100,100,0,2*Math.PI,false);

// 截取图片
context.clip();