HTML5 Canvas 绘制加拿大枫叶旗
2017-09-04 05:52
232 查看
这段代码比较简单,中间的枫叶使用了图片,因为没找到画法:
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>加拿大枫叶旗</title> </head> <body onload="draw()"> <canvas id="myCanvus" width="496px" height="249px" style="border:1px dashed black;"> 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- function draw(){ var canvas=document.getElementById("myCanvus"); var canvasWidth=496; var canvasHeight=249; var context=canvas.getContext("2d"); context.fillStyle = "white"; context.fillRect(0, 0, canvasWidth, canvasHeight); // 先画边上红色方块 context.fillStyle = "rgb(218,37,29)"; context.fillRect(0, 0, 124, 249); context.fillRect(372, 0, 124, 249); // 绘制枫叶 var img=new Image(); img.src='fy.gif'; context.save(); img.onload=function(){ var pattern=context.createPattern(img,'no-repeat'); context.fillStyle=pattern; context.translate(124,0); context.fillRect(0,0,248,249); } context.restore(); } function getRad(degree){ return degree/180*Math.PI; } //--> </script>
代码及图片下载:https://files.cnblogs.com/files/xiandedanteng/canadaFlag.rar
相关文章推荐
- HTML5 Canvas 绘制五角星
- HTML5 Canvas 绘制六叶草
- Html5 用canvas绘制图片,绘制不出来
- html5 canvas绘制矩形和圆形
- 利用HTML5的canvas标签实现灰太狼图像的绘制
- HTML5 Canvas绘制环形进度条
- 利用HTML5中的Canvas绘制一张笑脸的教程
- HTML5 canvas基本绘图之绘制五角星
- HTML5 canvas绘制的玫瑰花效果
- 修复界面bug并增加了自动提示是否输赢的 关于之前博客"html5 canvas 绘制象棋(将持续改进)"
- 用html5的canvas画布绘制贝塞尔曲线完整代码
- html5 canvas绘制圆形进度实例
- html5-Canvas绘制弧线(圆形)
- 使用HTML5 Canvas API绘制弧线的教程
- HTML5中的<canvas>标签绘制圣诞树
- HTML5 Canvas 绘制路径实例
- HTML5中使用canvas绘制复杂图形
- html5 学习笔记 API canvas1 绘制对角线
- html5的canvas绘制迷宫地图
- HTML5 之Canvas绘制太阳系