javascript - 一个关于canvas的简单问题，最近打算学学canvas，求解答

问题描述

问 题

//1.首先是关于canvas通过引入本地图片绘制图像
//html
<div class="div1">
    <canvas id="drawing"></canvas>  //width:500px  height:500px
</div>
<img src="images/ceshi2.jpg" id="tulip"/> //图像正确显示  大小规格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拷贝下来的，但是为什么人家画出来的是圆形而我是是椭圆形（如下图）

解决方案

是不是你canvas设置宽高出了问题？

http://www.cnblogs.com/wangwc...

操作canvas宽高有两种方式:
1.直接设置：

<canvas id="drawing" width="500" height="500"></canvas>

2.通过js设置画布大小

var canvas = document.getElementById("drawing");
canvas.width = 500;
canvas.height = 500;

注意：直接使用css设置，canvas会被拉伸

这篇关于javascript - 一个关于canvas的简单问题，最近打算学学canvas，求解答的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！