HTML5 canvas学习的实例介绍

互联网 17-6-30

1.HTML5中的Canvas标签的创建

window.onload = function(){    createCanvas();   }  function createCanvas(){   var canvas_width= 200, canvas_height = 200;     document.body.innerHTML = "<canvas id=\"canvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>";    }

2.HTML5Canvas标签绘制图形

var canvas_width= 500, canvas_height = 500;var mycanvas, context;    window.onload = function(){    createCanvas();    drawRect();   }  function createCanvas(){          document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>";     mycanvas = document.getElementById("mycanvas");     context = mycanvas.getContext("2d");    }     function drawRect(){   context.fillStyle ="#FF0000"; //context.rotate(45);//旋转45度   //context.translate(200,200);//移动   //context.scale(2,0.5);//缩放   context.fillRect(0,0,200,200);    }

3.HTML5Canvas标签绘制图片

var canvas_width= 500, canvas_height = 500;var mycanvas, context;    window.onload = function(){    createCanvas();    drawImage();   }  function createCanvas(){          document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>";     mycanvas = document.getElementById("mycanvas");     context = mycanvas.getContext("2d");    }     function drawImage(){ var img = new Image();   img.onload = function(){    context.drawImage(img,0,0);   }   img.src = "1.png";    }

以上就是HTML5 canvas学习的实例介绍的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： h5