js设置canvas的宽高（动态设置canvas的宽高）

设置canvas的宽高有两种方式：

1：在html的canvas标签中设置宽高

 <body><canvas id="canvas" width="300" height="300"></canvas></body>

2：在js中设置canvas的宽高

注意：在js中设置canvas的宽高时，如果设置方式不正确，或者在cass中设置时，在绘制图像时就会出现拉伸的情况。这是因为canvas的默认宽高为300px*150px，在css中设置canvas的宽高，实际上是把canvas在300px*150px的基础上进行了拉伸。所以绘制出来的图像会发生变形。

在js中设置canvas的宽高时应当使用以下方法：

         document.getElementById("canvas").width = 600;document.getElementById("canvas").height = 600;

3：在js中动态创建canvas

代码如下：

html:

<div id="canvas_box"></div>

js:

         window.onload = function(){var canvas = document.createElement("canvas");canvas.style.border = "solid 1px red";canvas.id = "canvas";var box = document.getElementById("canvas_box");box.appendChild(canvas);//设置宽高一定要在canvas节点添加之后document.getElementById("canvas").width = 600;document.getElementById("canvas").height = 600;}

js设置canvas的宽高（动态设置canvas的宽高）相关推荐

axios设置text html,axios封装动态设置Content-Type
问题如下: 有个问题是这样的后台给的API接口请求类型有两种 'Content-Type': 'application/json' 'Content-Type': 'application/x- ...
微信小程序：enablePullDownRefresh、onReachBottomDistance 、动态设置窗口的背景色、动态设置下拉背景字体
一.enablePullDownRefresh 1.下拉刷新enablePullDownRefresh的支持单页面配置json文件 {"enablePullDownRefresh" ...
计算图片的宽和高动态设置图片的位置
切记 : 计算图片的高度和宽度应该在请求数据的时候获取.然后保存起来否则的话会造成卡顿现象方法优化: WidthAndHeight *wAndH = _widthAndH ...
vue 动态设置div的高度_Vue 动态设置元素高度
1. Vue文件如下 let windowHeight = parseInt(window.innerHeight) export default { data() { return { window ...
EasyPlayer.js如何实现动态设置解码H.265音频？
视频平台EasyCVR.EasyGBS.EasyDSS.EasyNVR等均集成了我们自主研发的EasyPlayer视频流媒体系列播放器,可支持H.264/H.265视频编码,并拥有多个版本包括Easy ...
Silverlight学习笔记三(鼠标点击动态画直线|动态设置Ellipse的Canvas.Top与Canvas.Left|动态设置Stroke属性的方法。)...
我有可能需要把AutoCAD的部分功能搬到浏览器上,先练习一下画直线的方法.如图: MainPage.xaml代码: 大气象 <UserControl x:Class="DrawLin ...
微信小程序js如何动态设置css
微信小程序中可以使用setData()方法动态设置CSS样式. 例如,我们可以在wxml文件中定义一个样式类: ``` <view class="my-class">H ...
js动态设置元素的宽高
js动态设置元素的宽高实现代码: var html = document.getElementsByTagName('html')[0];var dl_second_nav=document.get ...
js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

js设置canvas的宽高（动态设置canvas的宽高）

js设置canvas的宽高（动态设置canvas的宽高）相关推荐

最新文章

热门文章