canvas画布变换画六芒星

要求使用canvas的画布变换方法。

效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head><title>六芒星</title><meta charset="utf-8">
</head>
<body><canvas id="canvas" width="220" height="220"></canvas><script type="text/javascript">var canvas = document.querySelector('#canvas'),context = canvas.getContext('2d');var width = canvas.width,height = canvas.height;// 原点坐标var originX = width / 2,originY = height / 2,radius = 100;context.lineWidth = 1;// 画外圈context.strokeStyle = '#000';context.beginPath();context.arc(originX, originY, radius, 0, 2 * Math.PI);context.stroke();context.closePath();context.beginPath();context.arc(originX, originY, radius + 10, 0, 2 * Math.PI);context.stroke();context.closePath();// 把原点移动到圆心，旋转之后才不会变形context.translate(originX, originY)for (var i = 0; i < 6; i++) {// 画完三角形后旋转一半角度画另一个三角形if (i === 3) {context.rotate(Math.PI * 2 / 6);}context.moveTo(0, -radius);context.lineTo(radius * Math.sin(Math.PI / 3), radius / 2);context.stroke();context.rotate(Math.PI * 2 / 3);}</script>
</body>
</html>

canvas画布变换画六芒星相关推荐

Python设置画布大小_Python 之 Tkinter Canvas画布
定义: Canvas画布:画布控件用于将结构化图形的Python应用.主要用于绘制图表和曲线图. 语法格式: 可能选项的列表如下选项描述 bd 表示该边界的宽度,默认的宽度是 2 bg 它代表了 ...
2D/3D视图变换、canvas画布
1,2D图形变换图形变换主要通过transform css属性来达到图形的旋转.平移.和缩放旋转旋转中心(基准点)为中心点,deg是角度制单位 transform: rotate(45deg); ...
画布canvas标签，并且在画布上画简单的形状
今天整画布,半天下来老是错,结果: <canvas id = 'c1' width="400" height="400"> <p>浏览器 ...
前端：JS/37/canvas对象（画布对象），用canvas对象（画布）画一些基本的图像
canvas对象用canvas对象(画布)画一些基本的图像 @沉木
用canvas画布画时钟
canvas canvas简介 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形 ...
利用canvas画布和rotate()方法让画的图形旋转起来
上一篇讲了利用canvas画布画太极图,这一篇说的是让太极图旋转起来. **思路:**利用HTML DOM 的setInterval()方法,它会按照指定的周期来调用函数或计算表达式.再利用画布的ro ...
HTML5两个画布如何弄,有趣html5（两）----使用canvas结合剧本画在画布上的简单图（html5另一个强大）...
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...
HTML5 Canvas API 变换(translate函数)
下面我们来看下在canvas上绘制图像的另一种方式--变换(translate函数的应用): 下面的代码:我们还是实现上篇文章的效果:画一条斜线.理论上的知识,自己买书去看吧! <!DOCTYP ...
HTML5 API详解（12）:canvas画布API提供的内容很丰富啊~
不考虑代码质量的话,一般来说css3>canvas>纯js. 1. css3动画是独立与js线程的,js的运算操作不会阻塞css3的动画,所以在系统cpu占用率较高的时候,css3的动画性 ...

canvas画布变换画六芒星

canvas画布变换画六芒星相关推荐

最新文章

热门文章