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作为手段,在饼状 ...
随机推荐
- [错误解决]paramiko.ssh_exception.SSHException: Error reading SSH protocol banner 设置
报错信息 上午的时候数据组的同事跟我说有几个程序报错,经过查看log发现找到报错信息: paramiko.ssh_exception.SSHException: Error reading SSH p ...
- Struts2请求流程
1. 一个请求在Struts2框架中的处理步骤: a) 客户端初始化一个指向Servlet容器的请求: b) 根据Web.xml配置,请求首先经过ActionContextCleanUp过滤器,其为可 ...
- hdu6134[莫比乌斯反演] 2017多校8
/*hdu6134[莫比乌斯反演] 2017多校8*/ #include <bits/stdc++.h> using namespace std; typedef long long LL ...
- HDU 5884 Sort（二分答案+计算WPL的技巧）
Sort Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- [AGC004C] AND Grid [构造]
题面: 传送门 思路: 一眼看上去是一道很迷的题目......直到我发现,红蓝色涂色的过程是互相独立的 而且最外围没有紫色 那么可以这样操作: 最左边一列全部红色,最右边一列全蓝 然后中间的一行红一行 ...
- 简单的log
简单的方法想日志中追加内容 public static void updateSql(string Name,string str) { FileStream fs = new FileStream( ...
- 独木桥(bridge)
独木桥(bridge) 题目描述 Alice和Bob是好朋友,这天他们带了n个孩子一起走独木桥. 独木桥宽度很窄,不允许两个或两个以上的人并肩行走,所有人必须要前后一个接一个地通行. Bob给所有的孩 ...
- 0-Broadcast机制原理简要介绍
Broadcast机制简要介绍 来源: http://blog.csdn.net/luoshengyang/article/details/6730748 导语 广播机制在Android系统中,也不算 ...
- Java简明教程 12.多线程(multithreading)
单线程和多线程 关于它们的区别,zhihu上有一个回答,我认为十分不错,如下: . 单进程单线程:一个人在一个桌子上吃菜. . 单进程多线程:多个人在同一个桌子上一起吃菜. . 多进程单线程:多个人每 ...
- Codeforces Round #320 (Div. 2) [Bayan Thanks-Round] D 数学+（前缀 后缀 预处理）
D. "Or" Game time limit per test 2 seconds memory limit per test 256 megabytes input stand ...