[英]Getting a shape to draw on the html5 canvas
I have a function that basically uses lines to draw a psuedo circle of a specific size and fills it in a colour. 我有一个函数,该函数基本上使用线条绘制特定大小的伪圆并将其填充为颜色。
However when I try to call my method, it does not draw and I found no errors on the debug console (I'm using chrome) and jsfiddle threw up no errors for me. 但是,当我尝试调用我的方法时,它不会绘制,并且在调试控制台上没有发现错误(我正在使用chrome),而jsfiddle却没有为我抛出任何错误。
Here is the code: 这是代码:
function drawLineCircle (x, y, size, colour, scale, segments) {
context.save();
context.strokestyle = '#000000';
context.fillStyle = colour;
context.lineWidth = 3;
context.beginPath();
var anglePerSegment = Math.PI *2 / segments;
for (var i = 0; i <= segments; i = i + 1){
var angle = anglePerSegment * i;
var radius = size * scale;
var a = x + radius * cos (angle);
var b = y + radius * sin (angle);
if (i == 0)
context.moveTo (a, b);
else
context.lineTo (a, b);
}
context.stroke();
context.fill();
context.closePath();
context.restore();
}
Any help would be greatly appreciated! 任何帮助将不胜感激!
There are a couple of problems with your code: 您的代码有两个问题:
context
您没有定义context
cos
and sin
are properties of Math
cos
和sin
是Math
属性 Here is a corrected example: http://jsfiddle.net/REw7j/1/ 这是一个更正的示例: http : //jsfiddle.net/REw7j/1/
function drawLineCircle (x, y, size, colour, scale, segments) {
var canvas = document.getElementById('example');
var context = canvas.getContext('2d');
context.save();
context.strokestyle = '#000000';
context.fillStyle = colour;
context.lineWidth = 3;
context.beginPath();
var anglePerSegment = Math.PI *2 / segments;
for (var i = 0; i <= segments; i = i + 1){
var angle = anglePerSegment * i;
var radius = size * scale;
var a = x + radius * Math.cos (angle);
var b = y + radius * Math.sin (angle);
if (i == 0)
context.moveTo (a, b);
else
context.lineTo (a, b);
}
context.stroke();
context.fill();
context.closePath();
context.restore();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.