挖坑指南: canvas元素的宽高属性和css中的宽高(大型翻车现场..)

最新推荐文章于 2023-07-30 09:00:22 发布
置顶 VIP文章 最新推荐文章于 2023-07-30 09:00:22 发布
阅读量1.9k 收藏
点赞数 1
分类专栏： 挖坑指南 文章标签： canvas canvas.drawImage() 小程序canvas canvas背景 canvas宽高
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39015132/article/details/86295280
版权

原文链接

前言

在微信小程序中做分享海报, 需要绘制 canvas，设置图片 100% 占满元素, 作为海报的背景。

开始

文档翻一翻, canvas.drawImage() 一把梭, 呃呃呃…发现背景图片没有按照原图 100% 平铺, 而是只取了部分, 变形了

实践

装X失败, 还是仔仔细细看看文档
drawImage(image sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持
先来分析以下这些参数的含义吧~ 和 h5 中的参数是一致的

  • sx 源图像的矩形选择框的左上角 x 坐标
  • sy 源图像的矩形选择框的左上角 y 坐标
  • sWidth 源图像的矩形选择框的宽度
  • sHeight 源图像的矩形选择框的高度
  • dx 图像的左上角在目标 canvas 上 x 轴的位置
  • dy 图像的左上角在目标 canvas 上 y 轴的位置
  • dWidth 在目标画布上绘制图像的宽度, 允许对绘制的图像进行缩放
  • dHeight 在目标画布上绘制图像的高度, 允许对绘制的图像进行缩放
    看完是不是[黑人问号.jpg]， whatttt…???
    上图上图
    一图胜千言
    再看看我们失败的代码(此处使用普通h5作为演示)
<img id="tulip" src="/share/img/[email protected]"&g
最低0.47元/天 解锁文章
車句
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
H5 canvas中width、height和style的宽高区别详解
09-22
主要给大家介绍了关于H5 canvas中width、height和style的宽高区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
canvas学习笔记（一）——关于css设置canvas画布大小的问题
这个昵称没有被占用吧的博客
10-29 2万+
canvas的绘制会是画布大小为准的。canvas的默认画布大小为300×150。通常，我们可能想要改变画布的大小，以下是大家最容易想到的方法：//方法一：内联样式 <canvas style="width:450px;height:300px;"></canvas> //方法二：内部样式 <style type="text/css"> #myCanvas { width:
微信小程序-Canvas
weixin_42340366的博客
05-18 795
微信小程序的canvas单独整理一篇 创建Canvas 支持绑定事件，点击触发事件。 <canvas style='height:{{height}}px;width:{{height}}px' canvas-id="myCanvas" bindtouchstart="start" bindtouchmove='move' bindtouchend='end'> </canv...
HTML5/CSS3学习——Canvas使用
最新发布
delishcomcn的博客
07-30 119
什么是 Canvas？HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
java中drawimage方法_canvas.drawImage()方法详解
weixin_34233974的博客
02-22 1120
首先看html5.js/**@param {Element} img_elem@param {Number} dx_or_sx@param {Number} dy_or_sy@param {Number} [dw_or_sw]@param {Number} [dh_or_sh]@param {Number} [dx]@param {Number} [dy]@param {Number} [dw]@...
canvas基础入门（一）canvas的width、height于css样式中的宽高区别
banxia2152的博客
06-22 413
canvas的width、height于css样式中的宽高对画布的内容显示是有所区别的 1、在canvas标签下调用他的width和height，而且是没有单位的宽高，这种指定canvas大小的方法也是w3c的标准，如下： <canvas id="mycanvas" width="300" height="300">浏览器不支持Canvas,请升级或改用其它浏览器！&...
html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？...
weixin_33946605的博客
03-29 383
&lt;canvas class="cvs"&gt;&lt;/canvas&gt;遇到的问题：如css 中设.cvs{width:500px;height:400px;}，也就是css改变了canvas的尺寸后，本来是可以画出一个圆来，现在却是一个扁平的圆，为什么呀？如图： 什么原因：（百度上说的）当你在支持html5 canvas的浏览器下查看页面的时候，你会看到一个大小为300px*30...
canvas元素大小与绘图表面大小
weixin_30340617的博客
06-14 555
原文链接：canvas总结：元素大小与绘图表面大小 前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height： 1 <canvasid="myCanvas"width="300"height="150">browserdon'tsupportcanvas</canvas>...
canvas设置像素与画布样式宽高不符的原因及解决办法
博哥的二进制世界
11-04 2598
canvas设置像素与画布样式宽高不符的原因及解决办法背景解决办法 背景 canvas绘制元素的时候，其单位通常都是以像素来统计的，且其设置的像素，是真实屏幕上的像素点数量，而我们通过css设置的像素并不是真实屏幕的像素点数量，其与dpr有关，所以有可能会出现以下情况：即通过css设置画布宽高，之后再在canvas中绘制元素的时候设置与画布相同宽高的像素，元素并不能占满画布，甚至对于尺寸的预估还差了一大截。为了解决这一问题，我们需要获取canvas画布中真实宽高的像素点数量，才能更好的设置元素的宽高 解决办
canvas05:在canvas标签中设置宽高与在style中设置宽高的区别
蜡笔love小新的博客
04-18 2316
在html中，我们给一个元素设置宽高通常会使用css样式设置。而canvas他有自己的宽高属性，我们可以在canvas中设置宽和高，但是canvas的width与height属性与css中设置width与height有没有区别，有什么区别呢，我们可以通过代码去实现对比一下。 第一种： 在canvas中设置宽高 代码： <!DOCTYPE html> <html lang=...
canvas需要在标签里直接定义宽高
09-28
主要介绍了为什么canvas需要在标签里直接定义宽高，对此专门做了下测试，非常实用，推荐给小伙伴们
小技巧：wx.canvasToTempFilePath与获取屏幕宽高
03-29
wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete，和wx.saveFile差不多；   wx.canvasToTempFilePath({ canvasId: 'target', success: function success(res) { wx.saveFile({
Leaflet.CanvasLayer.Field:在Leaflet中加载和设置栅格文件样式（geotiff和asciigrid）
05-06
IH.Leaflet.CanvasLayer.Field 的插件，可添加图层以可视化ASCIIGrid或GeoTIFF文件（EPSG：4326）中的字段（ aka Rasters ）。警告！ npm安装的新网址npm install ih-leaflet-canvaslayer-field 这包括： L.Canvas...
挖坑指南：[Vue warn]: Invalid prop: custom validator check failed for prop "XXX".
热门推荐
weixin_39015132的博客
11-02 4万+
前言 表单表单，开发后台尽是表单。话不多说，先看看问题吧。 开始 这个项目呢，是使用了iView UI框架。开始查找网上类似的问题。type排查了一遍，最后发现是Input组件的type赋值为number。而官方支持的呢，如下 好吧~ 开发中遇到各种各样的大问题小问题是难免的，关键是我们在遇到问题时，如何去解决问题。 总结 遇到问题，分析问题，解决问题，总结问题。 很多...
挖坑指南：如何通过事件动态地切换iView的Tabs（v-bind与v-model的区别）
weixin_39015132的博客
11-03 1万+
前言 iView的官方文档算是很详细的了，但是如果我们没有一定的编程经验，看文档也是一件令人困惑的事情。 Tabs官方文档：http://v2.iviewui.com/components/tabs#API 开始 先来看看项目的需求 看看官方文档为我们提供的接口 有了这些基本就可以开始啦~ 实践 页面结构 为Tabs绑定了事件指定了value。可以实现动态切换。 页面事...
挖坑指南：ESLint + VS Code自动格式化代码
weixin_39015132的博客
11-10 1万+
原文链接 前言 最近在整理公司的之前的项目，对整个产品线进行梳理重构。由于项目的编码人员换了好几拨，每个人编码又各有各的风格。现在在重新翻看，可读性很差。考虑到后期项目的扩展，以及对现有项目的优化，决定对代码进行整理，并统一使用ESLint进行规范约束。 开始 “编码一时爽，重构火葬场。” 刚开始接触vue学习的时候，也都是自然而然地关闭了ESLint。以至于没有从头开始养成良好的...
挖坑指南：如何在引用的外部js文件中获取vue页面实例？（独家）
weixin_39015132的博客
11-19 1万+
原文链接 前言 在基于iView的后台项目中，表格组件是我们的老朋友了。实现如下的效果更是最基本的需求： 开始 在iView早期1.x的版本(其实在~2.0.0-rc.7也能使用)，想要渲染这样的效果，代码如下： 升级2.x后，Table组件的render()也作了更改： vue官方文档(render())：https://cn.vuejs.org/v2/guide/...
Vue挖坑指南：[vue-router] Named Route 'XXX' has a default child route.
weixin_39015132的博客
11-01 1万+
前言 OA系统，使用了路由的嵌套，希望在访问子模块时，默认加载模块的默认路由。即为子模块设置默认路由 。 开始 我们先来看看，如何为子模块设置默认的路由。 这样写，会出现什么问题呢？打开控制台看看。 实践 vue-router给我们报了两个警告，我们一个一个来看。 第一个：[vue-router] Named Route 'companyStructure' has a def...
Vue挖坑指南: 如何在main.js中修改vuex中的值？
weixin_39015132的博客
10-31 8644
直接上图吧~好 总结 就是这么任性~嘻嘻(*^__^*) 嘻嘻…… 嘘寒问暖 不如打笔巨款~
android中使用Canvas绘制指定位置和宽高度的图片
05-25
你可以使用Canvas的drawBitmap方法来绘制指定位置和宽高的图片。具体步骤如下： 1. 获取要绘制的图片资源，可以通过BitmapFactory类的decodeResource方法获取。 ``` Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image); ``` 2. 定义画笔，并设置画笔的颜色、宽度等参数。 ``` Paint paint = new Paint(); paint.setColor(Color.RED); paint.setStrokeWidth(5f); ``` 3. 在Canvas上绘制图片，指定位置和宽高。 ``` canvas.drawBitmap(bitmap, left, top, paint); ``` 其中，left和top分别表示图片左上角的坐标位置。如果需要设置图片的宽高，可以使用BitmapFactory类的createScaledBitmap方法来创建指定大小的Bitmap。 ``` Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, width, height, false); canvas.drawBitmap(scaledBitmap, left, top, paint); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值