Canvas 插入图片

超、凢脫俗 2022-03-31 04:48 282阅读 0赞

最初想用w3c上面的方法：

[http://www.w3school.com.cn/tiy/t.asp?f=html5\_canvas\_image][http_www.w3school.com.cn_tiy_t.asp_f_html5_canvas_image]

发现不行。

最后看到一篇博客：介绍是因为图片加载没有完成，所以巴拉巴拉......

[https://blog.csdn.net/m0\_38073011/article/details/80027397][https_blog.csdn.net_m0_38073011_article_details_80027397]

自己写的代码：

<!DOCTYPE HTML>
    <html>
        
    <body>
    <script  type="text/javascript" src="jquery-3.2.1.min.js"></script> //注意此处的位置      
    <canvas id="myCanvas" width="800" height="1000" style="border:1px solid #c3c3c3;">
    </canvas>
    <img src="I:/JS+20181213/gui_develop/background.png" hidden="hidden" id="img1">
    <script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    var img=document.getElementById("img1");
    img.onload=function(){cxt.drawImage(img,0,0);};
    </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUyODA4OQ_size_16_color_FFFFFF_t_70][]

介绍调试JS的两个小技巧：

1：图片的位置，直接用浏览器打开图片，直接复制显示在浏览器的位置就可以。

2：consol.log("aaa"),类似此类型语句，可以用于代码调试

[http_www.w3school.com.cn_tiy_t.asp_f_html5_canvas_image]: http://www.w3school.com.cn/tiy/t.asp?f=html5_canvas_image
[https_blog.csdn.net_m0_38073011_article_details_80027397]: https://blog.csdn.net/m0_38073011/article/details/80027397
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUyODA4OQ_size_16_color_FFFFFF_t_70]: /images/20220331/adf5eba836f64d1cb897f3174816a308.png

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

还没有评论，来说两句吧...

相关阅读

相关 Canvas-图片旋转

Canvas-图片旋转 > 众所周知canvas是位图，你可以在里面渲染你要的东西，不过你只能操作canvas的属性来进行编辑。就是说你并不能操作画进canvas的东西，

野性酷女/ 2023年06月11日 03:18/ 0 赞/ 4 阅读

相关 canvas跨域绘画图片

尽管不通过 CORS 就可以在 Canvas 画布中使用图片，但是这会污染画布。一旦画布被污染，你就无法读取其数据。例如，你不能再使用画布的 toBlob(), toDataU

「爱情、让人受尽委屈。」/ 2023年01月17日 02:24/ 0 赞/ 205 阅读

相关 canvas图片画圆角

获取屏幕比率有的手机屏幕实际分辨率的像素比页面过去的尺寸像素要大，一遍是一倍或者两倍 var getPixelRatio = function(context)

冷不防/ 2023年01月11日 08:52/ 0 赞/ 278 阅读

相关 canvas实现放大镜查看图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

忘是亡心i/ 2022年06月14日 03:19/ 0 赞/ 284 阅读

相关 canvas 图片base64压缩

作者：LoveEmperor-王子様 <!DOCTYPE html> <html lang="en"> <head> <meta cha

本是古典何须时尚/ 2022年06月02日 06:41/ 0 赞/ 334 阅读

相关 HTML5 Canvas 开发绘图方法整理【六、canvas image /canvas绘制图片、平铺图片】

绘制图片目前有三种调用的方式： 1、ctx.drawImage(image,dx,dy); //image 是要显示的图片 dx与 dy 是图片左上角的横坐标与纵坐标

喜欢ヅ旅行/ 2022年05月31日 09:05/ 0 赞/ 668 阅读

相关 canvas画圆形图片

效果图： ![70][] 实现环境在微信小程序中参考网站[https://www.jianshu.com/p/9a6ee2648d6f][https_www.ji

谁践踏了优雅/ 2022年05月26日 12:36/ 0 赞/ 284 阅读

相关 canvas 图片灰度算法

canvas 图片灰度算法 1. 平均值 Gray = ( Red + Green + Blue ) / 3 1. 按人眼对三原色的感知度：绿》红

约定不等于承诺〃/ 2022年05月19日 12:26/ 0 赞/ 218 阅读

相关 Canvas 插入图片

最初想用w3c上面的方法： [http://www.w3school.com.cn/tiy/t.asp?f=html5\_canvas\_image][http_www.w3

超、凢脫俗/ 2022年03月31日 04:48/ 0 赞/ 283 阅读

相关 canvas基础—03插入图片

1.插入图片 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

朱雀/ 2022年03月20日 13:19/ 0 赞/ 289 阅读