canvas 第一课

本文主要是介绍canvas 第一课，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简单使用

• 绘制简单的线、形状

          canvas.getContext('2d'):   返回一个用于在画布上绘图的环境context.beginPath();       开始当前路径 context.moveTo(100,100);   开始绘制点context.lineTo(150,200);   结束绘制点context.lineWidth = 3;     线条的宽度context.closePath();       结束当前路径 context.fillStyle = "rgb(2,100,30)"; 设置填充的颜色context.fill();                      实现填充context.strokeStyle = "#005588";     设置线条的颜色context.stroke ();                   线条的绘制
  

//  1. 使用centext 绘制， 先设置绘制的状态 
//  2. 再画出线条window.onload = function(){var canvas = document.getElementById('canv1');canvas.height = 500;canvas.width = 500;var context = canvas.getContext('2d');context.beginPath(); //1.设置绘制的状态 context.moveTo(100,100);   context.lineTo(150,200);  context.lineWidth = 3;context.lineTo(150,100); context.lineTo(100,100);  

这篇关于canvas 第一课的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---