canvas绘制直线

迈不过友情╰ 2021-07-24 16:57 523阅读 0赞

### 说明： ###

lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。  
  moveTo(x, y) 将笔移动到指定的坐标x以及y上。  
  stroke() 描边  
  lineWidth 设置线的宽度  
  strokeStyle 设置线条的颜色

### 实例1 ###

window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		//先将笔尖移动到0,0处
    		ctx.moveTo(0,0);
    		//先将笔滑到200,200处
    		ctx.lineTo(200,200);
    		//执行绘画的动作，如果没有执行stroke函数不会有任何的效果
    		ctx.stroke();
    	}

画了一条从0，0到200,200位置的直线

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

### 实例2  ###

window.onload=function(){
    		var canvas = document.getElementById('canvas');
    		canvas.width='300';
    		canvas.height='300';
    		var ctx = canvas.getContext('2d');
    		
    		ctx.lineWidth=10;//设置线条宽度10
    		ctx.strokeStyle='green';//设置线条颜色为绿色
    		
    		//先将笔尖移动到0,0处
    		ctx.moveTo(0,0);
    		//先将笔滑到200,200处
    		ctx.lineTo(200,200);
    		//执行绘画的动作，如果没有执行stroke函数不会有任何的效果
    		ctx.stroke();
    	}

加上了线的宽度和颜色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/438792c2c0d7471e8e90c786bb4d3c70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/a13b6a30e1ae4518b3867c2e972a419c.png