Cómo dibujar gráficos usando el elemento gráfico HTML5 Canvas

1. Dibujar un rectángulo en el lienzo

cuerpo?{

margen:?0 ;

relleno:?0;

}

js:/** *?Creado?por?winson?el?2016/9/11 */

function?draw(id)?{

var?canvas?=?document.getElementById(id);//Utilice getElementById para obtener el objeto del lienzo

var ?context? =?canvas.getContext('2d');//Obtener el contexto

context.fillStyle?=?"green";//El color del fondo del dibujo

context.strokeStyle?= ?"#fff";//El color del borde dibujado

context.lineWidth?=?5;?//Establecer el ancho del pincel

context .fillRect(0,?0,? 400,?300);//Dibujar

context.strokeRect(50,?50,?180,?120);

}