关于canvas

最新推荐文章于 2022-09-09 15:56:42 发布

紫莹馨羽

最新推荐文章于 2022-09-09 15:56:42 发布

阅读量78

点赞数

文章标签：关于canvas

本文链接：https://blog.csdn.net/weixin_44389132/article/details/88927260

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border:1px solid;
            /*width: 600px;*/
            /*height: 400px;*/
            /*不建议设置在样式内，会拉扯导致变性*/
        }
    </style>
</head>
<body>
<!--1，准备画布 2，准备绘图工具 3，开始绘图-->
<!--默认的宽高：300*150-->
<!--设置在元素内，只是改变画布的宽高-->
<canvas width="600" height="400"></canvas>
<script>
    //1.获取画布的元素
    var myCanvas=document.querySelector("canvas");
    //2.获取绘图工具
    var ctx=myCanvas.getContext("2d");
    //3.画笔的起点
    ctx.moveTo(100,100);
    //4.画笔的终点
    ctx.lineTo(200,100);
    //5.描边
    ctx.stroke();


</script>
</body>
</html>

将canvas转为图片

//从 canvas 提取图片 image  
function convertCanvasToImage(canvas) {  
    //新Image对象，可以理解为DOM  
    var image = new Image();  
    // canvas.toDataURL 返回的是一串编码的URL
    // 指定格式 PNG  
    image.src = canvas.toDataURL("image/png");  
    return image;  
}  
 
//获取网页中的canvas对象  
var mycans=$('canvas');   
//调用convertCanvasToImage函数将canvas转化为img形式   
var img=convertCanvasToImage(mycans);  
//将img插入容器 
$('#img').append(img);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

紫莹馨羽

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于canvas

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border:1px solid; ...
复制链接

扫一扫