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>
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作为手段,在饼状 ...
随机推荐
- Linux内核使用毫秒延时函数
毫秒延时函数:mdelay() 微妙延时函数:ndelay() #ifndef mdelay #define mdelay(n) (/ (__builtin_constant_p(n) &&a ...
- 微信Oauth2.0网页开放授权
网页授权获取用户基本信息 如果用户在微信中(Web微信除外)访问公众号的第三方网页,公众号开发者可以通过此接口获取当前用户基本信息(包括昵称.性别.城市.国家).利用用户信息,可以实现体验优化.用户来 ...
- quagga源码学习--BGP协议创建对等体
现有的路由协议都是通过分布式协议逐个配置协商运行的,协议协议,一个就不需要协议咯,至少2个才能够协议着做事情嘛,不过呢,这样就出现网元过多配置困难的问题,对网管软件要求也越来越高, SDN或许可能改变 ...
- github 客户端总是登录失败，提示密码错误
把输入法调成英文即可!!
- Codeforces 1063D Candies for Children
题目大意 给定整数 $n, k, l, r$,$1\le n, k \le 10^{11}$,$1\le l, r \le n$ . 令 $ m = r - l + 1$,若 $m \le 0$,$m ...
- BZOJ 4827 [Shoi2017]分手是祝愿 ——期望DP
显然,考虑当前状态最少需要几步,直接贪心即可. 显然我们只需要考虑消掉这几个就好了. 然后发现,关系式找出来很简单,是$f(i) f(i+1) f(i-1)$之间的. 但是计算的时候并不好算. 所以把 ...
- 【Reship】use of tangible T4 template engine
1.first of all 之前在 “使用T4模板生成代码 – 初探” 文章简单的使用了T4模板的生成功能,但对于一个模板生成多个实例文件,如何实现这个方式呢?无意发现一个解决方案 “Multipl ...
- 【asp.net】Win7旗舰版IIS配置
1.IIS配置流程 win7 iis 的配置不需要插入安装盘,可直接在控制面板中开启该功能,步骤如下: (1)"控制面板"-->"程序和功能"--> ...
- python3.5爬虫框架Scrapy的安装和排错（windows环境）
本文记录win7系统下使用python3.5安装Scrapy爬虫框架. Scrapy框架目前的官方文档说明是还不支持windows的python3环境的,但是网友反映以及实际测试均可以使用,下面就进行 ...
- PC网页js调用本地应用程序
最近要现实一个在PC网页中实现点击按钮调用本地应用程序的功能 其实实现原理也非常简单, 首先注册一个本地注册表文件,指向本地应用程序路径 其次在网页中用js指向这个注册表文件,就可以实现网页调用本地应 ...