1. 如何使用canvas绘制走势图
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="http://www.15hhy.com"
cxt.drawImage(img,0,0);
</script>
2. html js canvas 对象 代码查错。。。。。
var a = new o;?这是要干什么。这句话就会报错。除了js内置的对象外，new 关键字只能用来接一个方法。即一个对象的构造方法。
3. html5 两个canvas重叠放在一个div里面，每个canvas各填充一张图片，代码怎么写
1、首先素材准备，基本框架的建立。这里让一个有字的图片从左到右运动起来。
4. 会canvas 画布的，求教一下如下代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas 方块自身旋转放大缩小</title>
<style type="text/css">
body{ background:#999; }
#drawCanvas{ background:#fff; }
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("drawCanvas");
var ctx=canvas.getContext("2d");
var num=0;
setInterval(function(){
num++
ctx.save()
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.translate(150,150)
ctx.rotate(num*Math.PI/180)
ctx.fillRect(0,0,100,100)
ctx.restore()
},30)
}
</script>
</head>
<body>
<canvas id="drawCanvas" width="500" height="500" style="background:#eee;" ></canvas>
</body>
</html>
把ctx.translate(150,150)放到
ctx.clearRect(0,0,canvas.width,canvas.height)后面即可
5. 请教如何通过代码获取Canvas
我假设Canvas的Name="x1"设置是x1.SetValue(Canvas.ZIndexProperty,10);获取是x1.GetValue(Canvas.ZIndexProperty);
6. 使用Canvas画布结合JavaScript绘制以下图形，写出源代码和运行截图
<!DOCTYPEhtml>
<html>
<head>
</head>
<bodyalign="center">
<canvasid="drawing"width="400"height="400">Adrawingofsomeing!</canvas>
<scripttype="text/javascript">
//绘制饼图
vardrawCircle=function(canvasId,data_arr,color_arr){
vardrawing=document.getElementById(canvasId);
if(drawing.getContext){
varcontext=drawing.getContext('2d');
varradius=drawing.height/2-20,//半径
ox=radius+20,oy=radius+20;//圆心
varwidth=30,height=10,//图例宽高
posX=ox*2+20,posY=30;//图例位置
vartextX=posX+width+5,textY=posY+10;//文本位置
varstartAngle=0,endAngle=0;//起始、结束弧度
context.strokeStyle='Purple';
context.lineWidth=3;
context.strokeRect(0,0,drawing.width,drawing.height);
for(vari=0,len=data_arr.length;i<len;i++){
//绘制饼图
endAngle+=data_arr[i]*2*Math.PI;
context.fillStyle=color_arr[i];
context.beginPath();
context.moveTo(ox,oy);
context.arc(ox,oy,radius,startAngle,endAngle,false);
context.closePath();
context.fill();
startAngle=endAngle;
}
}
};
varinit=function(){
vardata_arr=[0.05,0.25,0.6,0.1],
color_arr=['#00FF21','#FFAA00','#00AABB','#FF4400'];
drawCircle('drawing',data_arr,color_arr);
};
init();
</script>
</body>
</html>
7. 谁帮我帮我看一段 html5 canvas的代码 不知道哪错了，显示不出效果
你这代码是手打的吗？
varcanvas=document.getElementById=('mc');
应该是
varcanvas=document.getElementById('mc');
多了一个等号
所有
ctx.fillRect|
后面多了一个|（竖杠），应该去掉
所有
strokRect
少了一个e，应该是
strokeRect
<html>
<head>
</head>
<body>
<canvas id="mc" width="400" height="280"
style="border:1px solid black"></canvas>
<script type="text/javascript">
//获取canvas元素对应的DOM对象
var canvas=document.getElementById('mc');
//获取在canvas上绘图的CanvasRenderingContext2D对象
var ctx=canvas.getContext(ƈd');
//设置填充颜色
ctx.fillStyle = "red";
//填充矩形
ctx.fillRect(30,20,120,60);
//设置线条颜色
ctx.strokeStyle = "#ff0";
//填充一个矩形
ctx.fillRect(80,60,120,60);
//设置线条颜色
ctx.strokeStyle="#00f";
//设置线条宽度
ctx.lineWidth = 10;
//绘制一个矩形边框
ctx.strokeRect(30,130,120,60);
//设置线条颜色
ctx.strokeStyle="#0ff";
//设置线条宽度
ctx.strokeStyle = "round";
//绘制一个举行边框
ctx.strokeRect(80,160,120,60);
//设置线条颜色
ctx.strokeStyle="#f0f";
//设置线条宽度
ctx.strokeStyle = "bevel";
//绘制一个举行边框
ctx.strokeRect(130,190,120,60);
</script>
</body>
</html>
8. html5中的canvas代码应用
伤不起啊，你没有IDE吗，我复制进去立马就报错了，
cxt.fillStyle='rgb(240,'+Math.floor(255-11.5*i)+','+Math.floor(255-11.5*j)+')';
9. html5 canvas绘图有什么用
html5 canvas 元素的作用就是描绘出图形，比如画圆，扇形，折线图等，有了这个，这些功能都是很好实现的。
10. canvas的<canvas> 的历史
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
<canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML 在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。
Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。
我们甚至可以在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。
<canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进，目前 <canvas> 已经成为 HTML 5 草案中一个正式的标签。