html canvas 简单体验

Posted 2020-07-02 zeopean

绘制直线

var canvas  = document.getElementById(‘c1‘);

var context = canvas.getContext(‘2d‘);

 

// context.moveTo(10 ,50); //起点

// context.lineTo(1000,50); //终点

// context.lineWidth = 20; //线宽

// context.strokeStyle=‘#cd3828‘; //颜色

// context.strokeStyle= "rgb(205,40,40)";

// context.lineCap = ‘round‘; //线头是圆形 round

 

// context.stroke(); //开始绘制

 

// //  绘制第二条线

// context.beginPath();

// context.moveTo(20,120);

// context.lineTo(200,120);

// context.strokeStyle=‘#eecddd‘;

// context.lineCap = ‘butt‘;

// context.stroke();

 

// 绘制第三条

// context.beginPath();

// context.moveTo(120,210);

// context.lineTo(500,210);

// context.lineWidth=20;

// context.strokeStyle=‘#defeed‘;

// context.lineCap=‘square‘;

// context.stroke();

 

//绘制三角形

context.moveTo(250 ,50);

context.lineTo(50,250);

context.lineTo(450,250);

context.lineTo(250,50);

context.lineWidth = 10;

context.strokeStyle=‘blue‘;

context.lineJoin=‘round‘; //边的衔接形状 round / bevel / mitre

context.stroke();

 

// 填充三角形

context.closePath();

context.fillStyle=‘red‘;

context.fill();

 

// 绘制矩形

// strokeRect(0,10,100,200);

// fillRect(0,10,100,200);

 

 

 

绘制曲线

var canvas  = document.getElementById(‘c1‘);

var context = canvas.getContext(‘2d‘);

 

// 绘制圆弧 

context.moveTo(62,24);

 

var control1_x = 187;

var control1_y = 32;

 

var control2_x = 429;

var control2_y = 480;

var endPointX  = 365;

var endPointY  = 133;

 

//绘制曲线

context.bezierCurveTo(control1_x , control1_y ,control2_x , control2_y , endPointX , endPointY);

context.stroke();

 

 

绘制正方形

var canvas  = document.getElementById(‘c1‘);

var context = canvas.getContext(‘2d‘);

 

// 实现原点图形旋转 

context.translate(100 ,100);

 

//绘制10个正方形

var copies =10 ;

for(var i=1; i < copies ; i++){

context.rotate(2*Math.PI * 1 / (copies - 1));

context.rect(0,0,60,60);

}

 

context.stroke();

 

颜色填充

var canvas  = document.getElementById(‘c1‘);

var context = canvas.getContext(‘2d‘);

 

// 通明度的实现

context.fillStyle = "rgb(100,150,185)";

context.lineWidth = 10;

context.strokeStyle = "red";

 

//绘制圆形

context.arc(110 ,120 ,100 ,0 ,2*Math.PI);

context.fill();

context.stroke();

 

//绘制三角形

context.beginPath();

 

context.fillStyle = "rgba(100,150,185,0.5)";

context.moveTo(215,50);

context.lineTo(15,250);

context.lineTo(315,250);

context.closePath();

context.fill();

context.stroke();