[英]Drawing line to HTML5 canvas not working using javascript
I am using the following codes to draw a line to html canvas. 我正在使用以下代码在html画布上画一条线。 But unfortunately i am not seeing any line in the canvas.
但不幸的是,我在画布上看不到任何线条。 I am not finding any error even.
我什至没有发现任何错误。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<br> <br> <br>
<input id="start" type="button" value="Start" onclick="startstop()" />
<input type="button" value="Turn Left" />
<input type="button" value="Turn Right" />
<br> <br>
<canvas id="Canvas" style="width:800px; height: 600px; border: 1px solid black;"> </canvas>
<script>
function startstop(){
var elem = document.getElementById("start");
if (elem.value==="Start")
{
elem.value = "Stop";
var mycanvas=document.getElementById("Canvas");
// alert(mycanvas);
var ctx=mycanvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10,400);
ctx.lineTo(200,400);
ctx.lineWidth=10;
ctx.strokeStyle="#ff0000";
ctx.stroke();
}
else
elem.value = "Start";
}
</script>
</body>
Here is the jsfiddle of the code http://jsfiddle.net/8ebLLwa9/ Can anyone help me too find the mistake? 这是代码的jsfiddle http://jsfiddle.net/8ebLLwa9/有人可以帮助我找到错误吗?
Your canvas height/width should be properties on the canvas itself, not a style attribute: 您的画布高度/宽度应该是画布本身的属性,而不是样式属性:
<canvas id='Canvas' width="800px" height="600px" style="border: 1px solid black;"></canvas>
Also, for your jsfiddle, change the loading state from "onLoad" to "No wrap - in head" 另外,对于您的jsfiddle,将加载状态从“ onLoad”更改为“ No wrap-in head”
使用css样式的属性width和height insetad定义画布:
<canvas id='Canvas' width='800' height='600' style="border: 1px solid black;"> </canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.