通过html5画布绘制一个矩形
draw a rectangle via a html5 canvas?
我是一个初学者,我一直在HTML 5中在画布上画一个矩形;HTML代码:
<script src="new 3y.js"></script>
<title>test</title>
</head>
<body>
<section id="main">
<canvas id="canvas" width="600" height="400">
test
</canvas>
</section>
</body
my js code:
function doFirst() {
var x = document.getElementbyId('canvas');
canvas = x.getContext("2d");
canvas.strokeRect(10,10,100,200);
}
window.addEventListener("load" , doFirst ,false);
问题是您使用的是document.getElementbyId
,但b
必须是大写的。
修复,你的代码工作正常:
function doFirst() {
var x = document.getElementById('canvas');
canvas = x.getContext("2d");
canvas.strokeRect(10,10,100,200);
}
window.addEventListener("load" , doFirst ,false);
<body>
<section id="main">
<canvas id="canvas" width="600" height="400">
test
</canvas>
</section>
</body>
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 只有一个图像被绘制到画布上
- 从 Ol3 中的绘制交互中删除最后一个点
- 使用 jQuery animate 时绘制一个又一个对象的线条
- 如何在一个适用于HTML5的TeeChart中绘制堆叠和普通系列
- 单击鼠标在画布上绘制一个实心圆
- FLOT只绘制一个值,或者没有绘制整个图形
- 如何在画布上绘制一个简单的五角大楼
- 用一个加载项绘制图像阵列
- 绘制一个没有边框的空心圆
- 从带有循环的数组中一个接一个地在画布上绘制形状
- 一个很好的方法来抵消所有绘制到画布上的0.5像素
- 将一个画布绘制到另一个不起作用的画布上
- 在画布上绘制另一个图像
- 如何在D3 Javascript中绘制一个简单的力导向图
- 在鼠标移动时绘制一个矩形,并使用 kineticjs 在鼠标向上选择该矩形内的所有形状
- 在 Openlayer3 中只允许一个绘制功能
- 在主动画循环中执行另一个绘制循环,持续5秒
- 是否有一种方法来确定一个给定的点(宽,长)是否在一个绘制的多边形内