请教：canvas的画图问题

PerterPon 2012-06-15 02:04:59

能否用一个stroke()函数，画出两种颜色的直线？貌似stroke函数只对最后一个strokeStyle设置的颜色起作用？多谢各位了

...全文

54 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

PerterPon 2012-06-15

打赏
举报

[Quote=引用 4 楼的回复:]

引用 3 楼的回复:

引用 2 楼的回复:

HTML code
<!DOCTYPE html> <html>
<head>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext……
[/Quote]
好吧，那我想想其他办法好了，多谢了哈～

三石-gary 2012-06-15

打赏
举报

[Quote=引用 3 楼的回复:]

引用 2 楼的回复:

HTML code
<!DOCTYPE html> <html>
<head>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
……

= =……
[/Quote]
我觉得不可能

PerterPon 2012-06-15

打赏
举报

[Quote=引用 2 楼的回复:]

HTML code
<!DOCTYPE html> <html>
<head>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
……
[/Quote]

= =...只能stroke一次啊，因为是插件里的东西，插件原先是将路径全部处理好之后，然后stroke，因为这边需要不同颜色的直线，所以想请问下能否只stroke一次，而画出不同strokeStyle的直线？

三石-gary 2012-06-15

打赏
举报

<!DOCTYPE html> <html>

<head>

  <script type="text/javascript">

      function draw() {

          var canvas = document.getElementById("MyCanvas");

          if (canvas.getContext) {

              var ctx = canvas.getContext("2d");

              ctx.beginPath();

              ctx.strokeStyle = "green";  // Use strokeStyle to set the color.

              ctx.rect(5, 5, 300, 250);

              ctx.stroke();

              ctx.beginPath();

              ctx.strokeStyle = "blue";  // Use strokeStyle to change the color.

              ctx.lineWidth = "5";

              ctx.moveTo(100, 100);

              ctx.lineTo(130, 100);

              ctx.stroke();

              ctx.beginPath();

              ctx.strokeStyle = "red"; 

              ctx.moveTo(170, 100);

              ctx.lineTo(200, 100);

              ctx.stroke();

              

          }

      }

  </script>

</head>

<body onload="draw();">

  <canvas id="MyCanvas" width="600" height="600"> </canvas> 

</body>

</html>

三石-gary 2012-06-15

打赏
举报

<!DOCTYPE html> <html>
<head>
<script type="text/javascript">
function draw()
{
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="green"; // Use strokeStyle to set the color.
ctx.rect (5,5,300,250);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle="blue"; // Use strokeStyle to change the color.
ctx.lineWidth = "5";
ctx.moveTo(100,100);
ctx.lineTo(130,100);
ctx.moveTo(170,100);
ctx.lineTo(200,100);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle="red"; // Use strokeStyle to change the color.
ctx.arc(150,125,100,0,Math.PI, false);
ctx.stroke();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="MyCanvas" width="600" height="600"> </canvas>
</body>
</html>
参考

掌握canvas基本用法; 掌握手势解锁实现原理; 得到注释详尽的源码; 掌握canvas的学习方法