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="250px" height="250px" style="border:0px dashed black;">出现文字表示你的浏览器不支持HTML5</canvas></body> </html> <script type="text/javascript"> <!--function draw(){var canvas=document.getElementById("myCanvus");var context=canvas.getContext("2d");context.fillStyle = "red";context.fillRect(0, 0, 250, 250);context.fillStyle = "black";// 填充黑色 context.fillRect(0, 0, 50, 150);// 填充矩形,参数分别为横坐标,纵坐标,宽高 context.fillRect(50, 100, 200, 50);context.fillRect(200, 150, 50, 100);context.fillRect(100, 0, 150, 50);context.fillRect(100, 50, 50, 200);context.fillRect(0, 200, 100, 50);context.strokeStyle = "yellow";// 描边黄色 context.strokeRect(50, 0, 50, 100);// 描边,参数分别为横坐标,纵坐标,宽高 context.strokeRect(150, 50, 100, 50);context.strokeRect(0, 150, 100, 50);context.strokeRect(150, 150, 50, 100);context.strokeRect(0, 0, 250, 250);} //--> </script>
本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7467309.html,如需转载请自行联系原作者
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建立简单的树机构
- 过年也学(nei)习 (juan)| 图像特征提取与匹配技术
- SpringMVC调用接口一直乱码
- apache并发测试工具ab为什么测不准
- 时间管理无非就是一个玩耍俄罗斯方块的过程,堆堆堆哈哈哈哈
- [Python人工智能] 二十三.基于机器学习和TFIDF的情感分类(含详细的NLP数据清洗)
- gan pytorch 实例_GaN教程(1)|美国宜普(EPC)公司推出“如何使用氮化镓器件”系列视频教程,讲授GaN功率晶体管和集成电路设计的方方面面...
- linux本地mysql与服务器同步数据_linux下指定mysql数据库服务器主从同步的配置实例...
- oracle数据库12下载地址,Oracle 数据库和补丁下载地址 12.1.0.2 11.2.0.4 11.2.0.1
- 网钛CMS PHP版蓝色响应式UI美化模板
- Python3.6 所有内置函数
- 计算机在英语课中的应用 博客,信息技术在小学英语教学中的应用
- Qt5学习笔记之bin文件合成工具三:偏移量数据填充
- Effective Java 第三版 中文翻译
- Python爬虫编程思想(92):项目实战:抓取京东图书评价
- 学好Python能做什么 python就业方向有哪些
- 删除文件时提示:无法读源文件或磁盘之解决办法
- SVD解线性方程组(非齐次)
- php求闰年的公式,php判断闰年(闰年计算方法)
- 服务器操作系统怎么设置密码,服务器操作系统怎么设置密码
热门文章
- 网页轻松展示CV、NLP模型,连你老爸都会操作 | 斯坦福出品
- PostgreSQL: epoch 新纪元时间的使用
- java连接redis无法连接,报异常RedisConnectionException
- 【Silverlight】Bing Maps开发应用与技巧三:Bing Maps Silverlight Control的离线开发
- [Java]Stack栈和Heap堆的区别(终结篇)[转]
- “无现金”社会来临,你还有安全感吗?
- iOS开发拓展篇—静态库
- C# IPGlobalStatistics获取本机网络流量信息
- CCNP OSPF协议详解
- Tungsten Fabric SDN — 流量调试手段