#H5 canvas api 1/20

H5 canvas api

初始化

cre
//获取canvas元素
var c = document.getElementById("myCanvas");
//设置2d类型·
var painting = c.getContext("2d"); //获取该canvas的2D绘图环境对象

绘制线条

//线段起点
    painting.moveTo(10,10);  
//起点到哪里
    painting.lineTo(20,20); 
    painting.lineTo(30,15); 
    painting.lineTo(10,10); 
//设置线条宽度
    painting.lineWidth=2;
//描边颜色
    painting.strokeStyle="red";
//填充颜色
    painting.fillStyle="blue";
//描边
    painting.stroke();  

填充

//填充
painting.fill();

绘制矩形

//填充矩形
painting.fillRect(0,0,20,10);
//描边矩形
painting.strokeRect(30,0,20,10);
//删除矩形
painting.clearRect(0,0,5,5);

绘制圆x, y, radius, starAngle,endAngle, true 顺时针

painting.beginPath();
painting.arc(70,18,15,0,Math.PI*2,true);
painting.closePath();
painting.fill();
####编辑

编辑

//移动
//painting.translate(100,100);
//尺寸
painting.scale(1,1);
//旋转
painting.rotate(Math.PI / 4);

添加文字

painting.font="20px Georgia";
painting.fillText("Hello World!",100,50);