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="240px" height="120px" style="border:1px dashed black;">出现文字表示你的浏览器不支持HTML5</canvas></body>
</html>
<script type="text/javascript">
<!--function draw(){var canvas=document.getElementById("myCanvus");var canvasWidth=240;var canvasHeight=120;var context=canvas.getContext("2d");context.fillStyle = "white";context.fillRect(0, 0, canvasWidth, canvasHeight);// 先画角上蓝色方块
        context.fillStyle = "blue";context.fillRect(0, 0, 100, 40);context.fillRect(140, 0, 100, 40);context.fillRect(0, 80, 100, 40);context.fillRect(140, 80, 100, 40);// 用旋转的白色长条去盖上蓝色方块,覆盖完出现八个三角块
        context.save();context.translate(120,60);context.rotate(getRad(26.56));context.fillStyle = "white";context.fillRect(-300, -12, 600, 24);context.restore();context.save();context.translate(120,60);context.rotate(getRad(-26.56));context.fillStyle = "white";context.fillRect(-300, -12, 600, 24);context.restore();// 四个红条
        context.save();context.translate(120,60);context.rotate(getRad(26.56));context.fillStyle = "red";context.fillRect(-300, 0, 300, 8);context.restore();context.save();context.translate(120,60);context.rotate(getRad(-26.56));context.fillStyle = "red";context.fillRect(-300, 0, 300, 8);context.restore();context.save();context.translate(120,60);context.rotate(getRad(-26.56));context.fillStyle = "red";context.fillRect(0, -8, 300, 8);context.restore();context.save();context.translate(120,60);context.rotate(getRad(26.56));context.fillStyle = "red";context.fillRect(0, -8, 300, 8);context.restore();// 用一个白条去把中间部分的多余红边去掉
        context.fillStyle = "white";context.fillRect(0, 40, 240, 40);// 画中间的红色十字
        context.fillStyle = "red";context.fillRect(0, 48, 240, 24);context.fillRect(108, 0, 24, 120);}function getRad(degree){return degree/180*Math.PI;
    }
//-->
</script>

关于英国国旗怎么画，请参考https://jingyan.baidu.com/article/46650658c93d6cf548e5f877.html

转载于:https://www.cnblogs.com/xiandedanteng/p/7471626.html

HTML5 Canvas 绘制英国国旗相关推荐

HTML5 Canvas 绘制新西兰国旗
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
canvas绘制中国国旗！
绘制中国国旗 1.题目今天刚学了H5中的画布canvas元素,课堂上的案例挺有意思,就心血来潮想利用canvas绘制中国国旗: 2.思路第一步,创建画布元素,在画布内作好辅助线和网格线来确定圆的位 ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法发布时间:2020-08-29 11:24:23 来源:亿速云阅读:96 作者:小新这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
放射性渐变色html,html5 canvas绘制放射性渐变色效果
效果图展示: canvas有些地方还是有点坑的,比如fillRect是方法不是属性,如果写成fillRect=这样是没效果的,而且还不报错.... 这里用到了createRadialGradient这 ...
HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）
HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 原文:HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 看到网上很多展示html5雪花飞动 ...

HTML5 Canvas 绘制英国国旗

HTML5 Canvas 绘制英国国旗相关推荐

最新文章

热门文章