5
296//1.首先是关于canvas通过引入本地图片绘制图像
//html
//width:500px height:500px
//图像正确显示 大小规格365*372
//js
var canvas=document.getElementById('drawing');
var context=canvas.getContext('2d');
var elImage=document.getElementById("tulip");
context.drawImage(elImage,10,10);
本事就是很简单的东西，为什么canvas中什么都没有，是空白的，但是没写错呀，我把w3c上的例子拷贝下来都不行，真是见了鬼了。
2//canvas画圆问题
context.beginPath();
context.arc(100,75,50,0,2*Math.PI);
context.stroke();
//这一段也是我在w3c拷贝下来的，但是为什么人家画出来的是圆形而我是是椭圆形（如下图）
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
是不是你
canvas设置宽高出了问题？http://www.cnblogs.com/wangwc...
操作
canvas宽高有两种方式:1.直接设置：
2.通过js设置画布大小
注意：直接使用
css设置，canvas会被拉伸为什么图片没有显示，是因为你图片的网址错了，当然没有图片。
第二个例子我画出来是圆，没有问题。
arc()函数就是画圆用的，不可能画出椭圆来……我想到了，你的第二个问题是一定是这样的。
你大概是搞错了
canvas宽高的设置方式canvas内部含有多少个像素是直接在标签内部写好的，像这样：在你的代码中没有看到这里的设置，如果你没有设置，
canvas将会默认是宽300px高150px。然后，你是不是在css中设置了它的宽高啊？
样式表给canvas设定的宽高仅仅只是它的外观大小，和它内部的像素多少没有关系，如果你强行设定外观大小，并且这个外观和标签内的宽高不相等的话，那么这个标签就会扭曲起来，最后体现出来的就是你的图像变形了
在你这个例子中，肯定是css的高大于了默认的
150px，导致整个图像沿着纵轴拉伸长了。首先，canvas需要设置好width,height，这个宽，高指的是画布的宽高，而通过css设置的width,height可以理解为canvas的宽高，但并不是真正意义上画布的宽高。
图片可以试试这个方法。 context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
canvas所谓设置的宽高指的是画布的大小,而通过CSS,style.width设置的是渲染后的图像的大小.所以自然被拉伸了.
这样设置的时候就会发现图像显示正常比例了,因为渲染后没有因为设置的宽高而拉伸.
至于图片问题,我是没有问题的.你可以检查下自己路径对没对
求解答，虽然我也知道应该是很简单的问题（代码应该没有写错啊，我来来回回对了好几遍！），但是就是不知道是什么问题