HTML5 Canvas 绘制加拿大枫叶旗
这段代码比较简单，中间的枫叶使用了图片，因为没找到画法：
<!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绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- html5 canvas绘制环形进度条，环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
随机推荐
- 只显示前几条数据的sql语句写法 七种数据库中Select Top的使用方法
七种数据库中Select Top的使用方法 1. Oracle数据库 SELECT * FROM TABLENAME WHERE ROWNUM <= N 2. Infomix数据库 SELECT ...
- PHP中create_function的用法总结
在php中,函数create_function主要用来创建匿名函数,有时候匿名函数可以发挥它的作用. 1.测试一 测试一主要用来循环替换数组中多个值的<与>,我们用array_map加上c ...
- HDU 3395 Special Fish（拆点+最大费用最大流）
Special Fish Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...
- redis学习（二）redis.conf文件配置
转自: https://www.cnblogs.com/pqchao/p/6558688.html 为了更好的使用redis,我们需要详细的了解redis配置文件及相关参数作用. bind 127.0 ...
- jmeter的参数化方法汇总
一.User Defined Variable 1.添加的位置 Add->Config Element->User Defined Variable 2.使用 变量phone添加成功后,在 ...
- UltraEdit快捷键大全-UltraEdit常用快捷键大全
UltraEdit快捷键大全-UltraEdit常用快捷键大全 UltraEdit是一套功能强大的文本编辑器,可以编辑文本.十六进制.ASCII码,可以取代记事本,内建英文单字检查.C++及VB指令突 ...
- Java-01背包问题-动态规划-递归和非递归实现
国际惯例,先上代码,粗略分析: package com.bag; /** * Author: lihao * Date:2017/8/31 * Description: */ public class ...
- 洛谷P2668 斗地主 [NOIP2015]
题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据牌的数码表示如下:3<4< ...
- t4-editor使用方法 Visual T4
原文发布时间为:2011-05-17 -- 来源于本人的百度文章 [由搬家工具导入] http://visualstudiogallery.msdn.microsoft.com/40a887aa-f3 ...
- 用来武装Firebug的十四款Firefox插件
原文发布时间为:2010-04-24 -- 来源于本人的百度文章 [由搬家工具导入] 如果你是一名Web设计师，Firebug想必不会陌生，作为一款Firefox插件，它可能是网站前端开发最有用的工具 ...