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 绘制加拿大枫叶旗相关推荐
- 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 绘制基本图形 从绘制直线 到 路径 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
最新文章
- python生成excel表格-Python实现将数据库一键导出为Excel表格的实例
- SpringBoot笔记:SpringBoot启动参数配置
- Android 开源库和项目 2
- 白鹭引擎生成自定义整数随机数
- 3-18pytorch与矩阵分解PCA
- 10种开发以及改善应用的低成本方法
- 数据库JDBC的基本内容
- 程序员们平时常逛的论坛
- AD原理图 PCB设计步骤
- Simple QQLogin 2.1(QQ登陆器,适用于 QQ2009 或更新版本)
- 直通车推广:打造潮流女装爆款
- 计算机与信息科学相关教材,AdobeIllustrator实例教程/计算机与信息科学系列规划教材...
- Allegro SigXplorer 等长设置方法-比较简单
- C语言if语句的基本用法
- 小白安装cadence virtuoso
- HTML及CSS常用知识点复习
- 2019-7-2-WPF-通过-ReadyToRun-提升性能
- C语言 随机出十道加减法的练习题并自动批改
- 【面试】学哥学姐,毕业找工作45个经典面试问题回答技巧送给你
- Java把一个大集合拆分成多个小集合,可以利用多线程提升并发处理效率
热门文章
- 全网最使用MySQL, JSP, Bean, JDBC(连接数据库) ,制作有权限(老师,学生,辅导员) 用户登录demo,表单查看demo
- 【小学】综合素质脑图笔记
- 初中计算机初识word教学设计,《初识Word》教学设计
- aria2 32bit Android,【各版本整合】32/64位Aria2 Tools - 支持RPC协议 AriaNG(客户端+网页版)...
- 梯度下降算法的细节补充(凸函数, 导数, 偏导数,梯度, 方向导数以及负梯度下降最快背后的泰勒身影)
- 《机器学习入门实战》第 01 篇 如何入门机器学习?
- mysql运维工程师_运维工程师需要了解的MySQL运维经验
- “消费盲返”的商业模式,你知道多少?
- canvas教程8-小球连线之碰壁则返
- 如何在visio中画立体图形