canvas设置大小

canvas元素实际上有两套尺寸，一个是元素本身的大小，还有一个就是元素绘图表明的大小，

设置canvas的width和height属性，实际上是同时修改了它的元素本身的大小以及元素绘图表面的大小，

默认情况下canvas元素于其绘图表面都是300*150，

<style>canvas{/*width: 600px;*//*height: 300px;*/border: 1px solid #000;}
</style>
<canvas id="canvas" width="600" height="300">canvas not supported
</canvas>
<script>var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.font = '30pt Arial';ctx.fillStyle = 'red';ctx.fillText('hello Canvas',100,100);ctx.strokeText('hello Canvas',100,100);
</script>

使用canvas元素的width和height属性控制的正确显示为：

通过css设定canvas元素的大小，则只会改变元素本身的大小，而不会影响到绘图表面的大小，

使用css设置canvas元素为600*300，然而绘图表面的大小没有发生变话依旧是300*150，

这时，canvas元素的大小不符合其绘图表面的大小时，浏览器就会对绘图表面进行缩放，使其符合元素的大小（放大到原来的2倍），如图：

所以，一定要注意使用width和height属性来修改canvas大小，而不是css进行操控大小，

否则会出现canvas元素大小和绘图表面大小不一致，浏览器会缩放绘图表面的大小，使之符合canvas元素的大小。

注意事项：

canvas元素的width和height只接受非负正整数，但是按照规则，不能给数值加‘px’后缀；

canvas设置大小相关推荐

设置canvas画布大小
canvas的绘制是以画布大小为准的. canvas的默认画布大小为300×150. 设置canvas画布大小的方法: // 方法一 <canvas id="test" wi ...
ugui unity3d 仪表盘_Unity3D---UGUI---UI创建以及Canvas设置
1.创建场景使用快捷键以及鼠标点击都可 QQ截图20180127105022.png 2.Image创建最简单的先创建一个Image 在Hierarchy窗口里的空白处右键点击>>UI ...
[echarts]echarts的canvas画布大小与容器大小不一致的解决方案
<div class="wrap" style="width:300px;height:300px;"><!-- echarts容器 --&g ...
HTML5 javascript修改canvas的大小
方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别: window.onload = function(){canvas.height = 100;canvas.width ...
java截取图片-设置方位+设置大小
java截取图片-设置方位+设置大小 package com.onegrid.darj.test; import java.awt.Rectangle; import java.awt.image ...
eclipse下的tomcat内存设置大小
eclipse下的tomcat内存设置大小在eclipse中设置,居然可以了, 设置步骤如下: 1.点击eclipse上的debug图标旁边的下拉箭头 2.然后选择Run Configuration ...
Canvas设置样式无效导致圆变成椭圆的问题研究剖析
Canvas设置样式无效导致圆变成椭圆的问题研究剖析,如下面代码段. <!DOCTYPE html> <html lang="en"> <head&g ...
python中mainloop添加背景_Python实例讲解 - tkinter canvas (设置背景图片及文字)
Python实例讲解 -- tkinter canvas (设置背景图片及文字) 先来一个绘图: from Tkinter import * master = Tk() w = Canvas(mast ...
[html] iOS下页面如何启动加载时显示画面图片？如何设置大小？它有什么好处？
[html] iOS下页面如何启动加载时显示画面图片?如何设置大小?它有什么好处? <link rel="apple-touch-startup-image" href=&q ...

canvas设置大小

canvas设置大小相关推荐

最新文章

热门文章