用变量的方式绘制一个五角星,首先求五角星十个顶点的坐标。

可以把每个五角星看成外顶点用一个大圆绘制,内顶点用小圆绘制。在坐标系(0deg)下,根据每个顶点的角度和圆的半径求得x,y。

而每个大顶点相差72deg(180/5),每个小顶点也差72deg.所以下一个顶点的度数就是当前点加上72deg.(逆时针)

代码实现画一个五角星


 drawStar(context, 300, 150, 400, 400,30);
function drawStar(context, R, r, x, y,rot) {  // R:大圆半径,r:小圆半径,x: x方向圆心位置 y: y方向圆心位置,rot:旋转角度
context.beginPath();
for (var i = 0; i <; i++) {
          //因为角度是逆时针计算的,而旋转是顺时针旋转,所以是度数是负值。
context.lineTo(x + Math.cos((18 + 72 * i - rot) / 180 * Math.PI) * R,
y - Math.sin((18 + 72 * i - rot) / 180* Math.PI)* R);
context.lineTo(x + Math.cos((54 + 72 * i - rot) / 180 * Math.PI) * r,
y - Math.sin((54 + 72 * i - rot) / 180 * Math.PI) * r);
}
context.closePath();
context.stroke();
}

画多个五角星

     for (var i = 0; i <; i++) {
var r = Math.random() * 10 + 10; //大小随机
var x = Math.random() * canvas.width; //位置随机
var y = Math.random() * canvas.height;
var rot = Math.random() * 360; //星星旋转角度随机
drawStar(context, r, r / 2, x, y, rot);
}
function drawStar(context, R, r, x, y, rot) {
context.beginPath();
for (var i = 0; i < 5; i++) {
context.lineTo(x + Math.cos((18 + 72 * i - rot) / 180 * Math.PI) * R,
y - Math.sin((18 + 72 * i - rot) / 180 * Math.PI) * R);
context.lineTo(x + Math.cos((54 + 72 * i - rot) / 180 * Math.PI) * r,
y - Math.sin((54 + 72 * i - rot) / 180 * Math.PI) * r);
}
context.closePath();
context.fillStyle = '#fb3';
context.strokeStyle = '#fd5';
context.lineWidth = 3;
context.lineJoin = 'round';
context.fill();
context.stroke();
}

然而上面代码并不符合软件工程的设计原则,一个函数包含了很多功能(绘制星星和位移,旋转角度都放在一个方法里)。当需求发生变化时,例如将五角星变成圆或多边形,就需要重新修改整个方法。在图形学中任何的图形学都使用先绘制基本轮廓再根据需求进行图形变换。也就是说一个方法绘制原始图形的路径,一个方法对图形进行变换(位移,角度,大小...) , 用户也可以直接传一个图形的路径或方法,根据路径进行绘制。

图形变换

  • context.translate(x, y);   对canvas坐标系进行整体位移
  • context.rotate(angle);   给canvas画布添加旋转矩阵,顺时针方向默认旋转中心点是Canvas的左上角(0, 0)坐标点,如果希望改变旋转中心点,例如以Canvas画布的中心旋转,需要先使用translate()位移旋转中心点。

注意:以上两个方法平移,旋转的是坐标系,而非元素。因此,实际开发的时候,平移或旋转完毕,需要将坐标系再还原。使用save(),restore().

  

  • context.scale(x, y);用来缩放Canvas画布的坐标系,只是影响坐标系,之后的绘制会受此方法影响,但之前已经绘制好的效果不会有任何变化。因此下面代码虽然起始点一样,但是由于坐标系被放大,使得放大后的图形起始点改变。如果设置lineWidth,也会放大。使用时要注意。

context.strokeRect(50, 50, 100, 100);
context.scale(2, 2);
context.strokeRect(50, 50, 100, 100);

     for (var i = 0; i < 200; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var rot = Math.random() * 360;
var r = Math.random() * 10 + 10;
transDraw(context, x, y, r,rot);
} // 用户可以直接传一个图形的路径或方法,根据路径进行绘制。
function transDraw(context, x, y, r, rot){
context.save(); //将当前状态压入栈中。 context.translate(x, y);
context.scale(r, r);
context.rotate(Math.PI / 180 * rot); context.fillStyle = '#fb3'; drawPath(context);
context.fill();
context.restore(); //将变换后的坐标系恢复到之前状态
}
     //绘制一个图形路径,无旋转角度,偏移,大小设置为1的五角星
function drawPath(context) {
context.beginPath();
for (var i = 0; i < 5; i++) {
context.lineTo(Math.cos((18 + 72 * i) / 180 * Math.PI) ,
-Math.sin((18 + 72 * i) / 180 * Math.PI) ) ;
context.lineTo(Math.cos((54 + 72 * i) / 180 * Math.PI) * 0.5,
-Math.sin((54 + 72 * i) / 180 * Math.PI) * 0.5);
}
context.closePath();
}

绘制月亮

最外面的弧用半圆进行绘制,里面的弧使用画弧的arcTo()方法,传入的参数为:控制点,终止点,半径。

起始点,控制点,终止点这些都是根据不同的需求位置可变,所以我们需要根据可以可变的点求出同样可变的半径。以AOC为角,因为tan = 对边 / 邻边,所以根据下面的公式可以求出半径。

AC和AH的长度很好求,而AC的长度只需要使用两点间距离公式

具体代码,还是使用先绘制原始路径,在进行变换。

变换函数drawMoon传入的参数d代表arcTo的控制点的横坐标

    function drawMoon(context, d, x, y, R, rot, fillColor) {
context.save();
context.translate(x, y);
context.scale(R, R);
context.rotate(Math.PI / 180 * rot);
MoonPath(context, d);
context.fillStyle=fillColor; context.fill();
context.restore();
}
function MoonPath(context, d) {
context.beginPath();
context.arc(0, 0, 1, Math.PI * 0.5, Math.PI * 1.5, true); //绘制外面的弧
context.arcTo(d, 0, 0, 1, distance(0, -1, d, 0) / d); //绘制里面的弧
}
function distance(x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))
}

最后就可以结合上面的星星月亮来绘制下面的一幅图

canvas绘制星星和月亮的更多相关文章

  1. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  2. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 学习笔记:HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  5. canvas绘制经典折线图(一)

    最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

  6. Canvas绘制图形

    1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  7. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

  8. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  9. html5的canvas绘制迷宫地图

    canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...

随机推荐

  1. 一起学Vue之样式绑定

    在前端开发中,设置元素的 class 列表和内联样式是基本要求.本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正. 概述 Vue操作元素的 class 列 ...

  2. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

  3. luoguP4449 于神之怒加强版

    题意 默认\(n\leqslant m\). 一波莫反后可得: \(\sum\limits_{T=1}^{n}\frac{n}{T}\frac{m}{T}\sum\limits_{d|T}d^k\mu ...

  4. node.js+mysql用户的注册登录验证

    下面代码实现的功能是:用node.js连接mysql实现用户的注册和登录,这里主要实现的是后端的验证代码,前端显示部分没具体写出. 整个程序的流程是这样的: 1.首先建立数据库reji,数据表user ...

  5. Hive初步认识,理解Hive(一)

    Hive初步认识,理解Hive(一) 用了有一段时间的Hive了,之前一直以为hive是个数据库,类似Mysql.Oracle等数据库一样,其实不然. Hive是实现Hadoop 的MapReduce ...

  6. 在Dynamics CRM中使用Bootstrap

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  7. jquery仿淘宝购物车页面商品结算(附源码)

    1.效果图如下: 2.源码如下: html部分: <!doctype html> <html lang="en"> <head> <met ...

  8. centos7在线yum安装mysql时官方镜像下载过慢的解决方案

    帮客户调试数据库,搭建一测试环境,centos7最小化安装后,在线安装mysql. 步骤: 1. wget -i http://dev.mysql.com/get/mysql57-community- ...

  9. WASM 成为 HTML、CSS 与 JS 之后的第 4 门 Web 语言

    大家都知道,万维网联盟 W3C 认证的 Web 语言有 HTML.CSS 与 JavaScript,而近日联盟正式宣布 WebAssembly 核心规范(WebAssembly Core Specif ...

  10. 截取字符串substr和substring两者的区别

    两者有相同点: 如果只是写一个参数,两者的作用都是一样的:就是截取字符串当前下标以后直到字符串最后的字符串片段. 不同点:第二个参数: substr(startIndex,lenth): 第二个参数是 ...