javascript – 如何使线条变为红色和蓝色？

2019-08-23 23:36:51 阅读：116 来源： 互联网

标签：javascript jquery html5 html5-canvas

我有this code,这适用于路径：

但我需要开始RED和结束行BLUE,我试着把context.strokeStyle =’blue’;但它失败了.

你知道怎么做吗？

canvas.width = canvas.height = 500;
var context = canvas.getContext('2d');
var shape = new Path2D();

function init(){
context.lineWidth = 1;
context.strokeStyle = 'red';


// RED RED RED
shape.moveTo(100,20);
shape.lineTo(200, 160);
shape.quadraticCurveTo(0, 200, 250, 120);
shape.bezierCurveTo(290, -40, 300, 200, 400, 150);


// BLUE BLUE
//---- make this BLUE BLUE BLUE BLUE not RED RED RED
//---- make this BLUE BLUE BLUE BLUE not RED RED RED
// line 2 
//---- make this BLUE BLUE BLUE BLUE not RED RED RED
//---- make this BLUE BLUE BLUE BLUE not RED RED RED
shape.lineTo(500, 90);

draw();
}    

var pos = 0;
var l = 760;
function draw() {
    context.clearRect(0,0,canvas.width, canvas.height);
    context.setLineDash([pos, l-pos]);
    context.stroke(shape);
    pos = pos+3;
    if(pos >= l){
        blink();
        return;
        }
    requestAnimationFrame(draw);
};
var i = 0;
function blink(){
    context.clearRect(0,0,canvas.width, canvas.height);
    if((++i % 30) > 15){
        context.stroke(shape);
        }

    requestAnimationFrame(blink);
    };
init();

解决方法:

使用渐变样式笔触

var gradient=context.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// Fill with gradient
context.strokeStyle=gradient;
context.lineWidth=5;

http://www.w3schools.com/tags/canvas_strokestyle.asp

标签：javascript,jquery,html5,html5-canvas
来源： https://codeday.me/bug/20190823/1702115.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何使线条变为红色和蓝色？