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作为手段,在饼状 ...
随机推荐
- maven学习（十四）——Eclipse中使用Maven插件
1.导入Maven项目 File→import
- mapserv和mapserv.exe的区别
哎,困扰了我这么久才知道一个是在unix环境下的,一个是在windows环境下的
- exit() 与 return() 的区别
exit()与 return() 的区别为: 1. return返回函数值,是关键字: exit 是一个函数. 2. return是语言级别的,它表示了调用堆栈的返回:而exit是系统调用级别的,它 ...
- MFC 禁用输入法
#include <Imm.h> HIMC m_hImc; // 全局或者成员变量 // Function for Disabling IME void CMyDialog::Disabl ...
- sys.modules[__name__]
A way to get a handle to the current running module in Python: import sys module = sys.modules[__nam ...
- client、offset、scroll
1. client 客户区大小 1.1. clientHeight和clientWidth element.clientHeight表示元素可视区域的高度,包括可视区域中元素的 CSS height+ ...
- Windows通过data文件夹恢复mysql数据库
mysql--1146--报错 先找到数据库存放地址,即Data文件夹(复制留下来) 再用电脑管家把所有的mysql卸载 然后把mysql文件夹弄走(卸载不会清掉它,需手动,一般在C:\Program ...
- 洛谷 [P3377] 左偏树(可并堆)
可并堆,就是可以合并的堆 注意并查集不能路径压缩,不然删除根节点时会出错 #include <iostream> #include <cstring> #include < ...
- SPOJ HIGH Highways
In some countries building highways takes a lot of time... Maybe that's because there are many possi ...
- [LeetCode] Scramble String 字符串 dp
Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrin ...