HTML5 Canvas 绘制旋转45度佛教万字

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>旋转45度佛教万字</title></head><body onload="draw()"><canvas id="myCanvus" width="400px" height="400px" style="border:1px 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, 400, 400);context.translate(200,305);context.rotate(Math.PI/4);
context.fillRect(-200, -200, 250, 250);context.fillStyle = "black";// 填充黑色
context.translate(-200,-200);context.fillRect(0, 0, 50, 150);// 填充矩形，参数分别为横坐标，纵坐标，宽高
        context.fillRect(49, 100, 200, 50);context.fillRect(200, 149, 50, 100);// 注意位置微调了，如果卡在零界点上会有背景的红线残留context.fillRect(100, 0, 150, 50);context.fillRect(100, 49, 50, 200);// 注意位置微调了，如果卡在临界点上会有背景的红线残留context.fillRect(0, 200, 101, 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);context.fillStyle = "red";// 用红色矩形块抹去多余的黄边
       context.fillRect(51, -2, 48, 100);// 注意起点和宽度都微调了，如果卡在临界点上会有细细的黄线残留context.fillRect(151, 51, 101, 48);context.fillRect(151, 151, 48, 101);context.fillRect(-2, 151, 100, 48);}
//-->
</script>

HTML5 Canvas 绘制旋转45度佛教万字相关推荐

在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...
python添加文字水印中间旋转45度_pythonpdf添加水印
0.用到两个扩展模块:ReportLab.PyPDF2. 1.创建水印PDF. 1).创建文字水印pdf文件代码: #encoding=utf-8 #author: walker #date: 20 ...
python添加文字水印中间旋转45度,Python添加pdf水印
1.创建水印PDF. 1).创建文字水印pdf文件代码:#encoding=utf-8 #author: walker #date: 2014-03-17 #function: 创建文字水印pdf ...
HTML5 canvas绘制太阳系各行星(包括月球的公转)
HTML5 canvas绘制太阳系看了好多canvas绘制太阳系行星,他们都忽略了月亮,虽然月亮不是行星,但是绘图少了月亮也就没有挑战性了,今天我就计算了一下月亮的轨迹,然后按照公转的比例画了上 ...
谷歌图标html5代码,HTML5 canvas绘制chrome浏览器 logo图标_网页代码站(www.webdm.cn)
HTML5 canvas绘制chrome图标使用canvas绘制chrome logo $ele:null, ele:null, context:null } $(function(){ oCanv ...
html中canvas设置透明度,HTML5 Canvas绘制时指定颜色与透明度的方法
这篇文章主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下指定颜色黑色是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 Canvas 绘制旋转45度佛教万字

HTML5 Canvas 绘制旋转45度佛教万字相关推荐

最新文章

热门文章