html学习 - canvas拉伸问题

最近画图,需要根据用户的输入来动态更改画布大小。

但是用js改变完画布大小后发现图形都被拉伸了。

想了半天没弄懂,然后搜索了下解决办法。原来是不允许随便用js来控制canvas的长宽。

canvas的默认长宽是 300 * 150.

不拉伸的解决办法:

var theCanvas = document.getElementById("canvasId");
theCanvas.width = 500;
the Canvas.width = 400;

这样更改canvas画布的长宽就不会有问题了。

假如用:

$(‘#canvasId‘).css(‘height‘, 500);
$(‘#canvasId‘).css(‘width‘, 400);

这样的话就会被拉伸了。

时间: 2024-10-14 15:00:51

html学习 - canvas拉伸问题的相关文章

UGUI初学习--------Canvas

今天仔细研究了一下UGUI觉得有必要写一篇文章来分享一下.废话不多说直接开码字..... 作者之前也学过NGUI.这里来说明一下,UGUI和NGUI的渲染结构略有不同,UGUI中将NGUI中的深度处理项取消了.UGUI的渲染是按照Hierarchy的UI游戏对象的排列顺序从上到下依次渲染的,重叠部分后渲染的会把先渲染的挡住.总结一句话:下在上前,子在父前.为了修改各个UI控件的绘制顺序,开发者可以采用以下两种方法:拖动Hierarchy视图里的各UI控件对象,改变它们在Canvas下的排列顺序:

android学习16#--学习canvas.drawText

本来这篇文章是要写写我在设计高级跑马灯程序的心得的,但是编写过程中花了近一天多的时间搞明白canvas.drawText中的第三个参数[float y]代表的真实含义.学习本文应该能帮助大家掌握FontMetrics类和Rect类成员变量值具体含义. drawText引出问题 先来看看api中是如何定义drawText的参数. /** * Draw the text, with origin at (x,y), using the specified paint. The * origin is

学习Canvas绘图与动画基础 制作弧和圆(五)

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>制作弧和圆</title> 6 </head> 7 <body> 8 <canvas id="canvas" style="border:1px solid #aaa; disp

最近学习canvas,写了个小的效果。

1 body { 2 margin: 0; 3 } 4 #game { 5 background: url("../images/back.png") repeat; 6 } 7 .wuli{ 8 position: absolute; 9 min-width: 200px; 10 height: 33px; 11 background: #355596; 12 opacity: 0.6; 13 filter:alpha(opacity = 60); 14 border-radius:

学习Canvas绘图与动画基础 为多边形着色(三)

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>多边形着色</title> 6 </head> 7 <body> 8 <canvas id="canvas" style="border:1px solid #aaa; disp

学习Canvas绘图与动画基础(一)

一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <canvas id="canvas" width="1024" height=&

HTML+Css学习-------Canvas

<canvas>标签 有属性width/height可以用来设置宽高,  但是宽高默认为:300px * 150px (width * height) javascript操纵: getContext( "2d" ):获取CanvasRenderingContext2D对象. 校验兼容性:   var canvas = document.getElementById('tutorial');      if (canvas.getContext){            v

Html5学习--canvas

canvas元素的实际尺寸(宽度,高度)是由标签上的属性width和height来决定的. 这两个属性不设置时默认值为:宽度=300px,高度=150px. 如果在样式表里设置width和height,则表示在实际宽度和高度的基础上进行缩放,缩放后的尺寸为样式里设置的width和height. 示例代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me

HTML学习-canvas绘制表情

开发工具:IntelliJ IDEA 实现效果:如下 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 function draw(id) 8 { 9 var can