<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <style>

        canvas{vertical-align:top;}

    </style>

</head>

<body>

<!-- 直线 -->

    <canvas id="canvas" width="100" height="100" style="border:1px solid red;"></canvas>

<!-- 三角形 -->

    <canvas id="canvas2" width="100" height="100" style="border:1px solid red;"></canvas>

<!-- 一个画布绘制两个 三角形 -->

    <canvas id="canvas3" width="300" height="300" style="border:1px solid yellow;"></canvas>

<!-- 绘制矩形 -->

    <canvas id="canvas4" width="300" height="300" style="border:1px solid green;"></canvas>

<!-- 绘制圆  或圆弧 -->

    <canvas id="canvas5" width="300" height="300" style="border:1px solid blue;"></canvas>

<!-- 坐标变换 -->

    <canvas id="canvas6" width="300" height="300" style="border:1px solid grey;"></canvas>

<!-- 单个实验 缩放 与旋转 -->

    <canvas id="canvas7" width="500" height="500" style="border:1px solid cyan;"></canvas>

<!-- drawImage方法 加背景图像 -->

    <canvas id="canvas8" width="500" height="500" style="border:1px solid red;background:black;"></canvas>

<!-- 绘制文字 -->

    <canvas id="canvas9" width="500" height="500" style="border:1px solid blue;"></canvas>

<script>

var canvas=document.getElementById("canvas");//获取canvas标签

var cxt=canvas.getContext('2d');//创建canvas对象  接口  钥匙

// canvas是基于状态的绘制

// 绘制一条直线---------------------------------------------------

cxt.moveTo(0,0);//起点

cxt.lineTo(100,100);//终点

// 设置线条样式

cxt.strokeStyle="red";//设置线条颜色

cxt.lineWidth="5";//设置线条粗细

cxt.stroke();//连接(绘画)命令   stroke：轻抚

// 绘制三角形-----------------------------------------------------

var canvas2=document.getElementById("canvas2");

var cxt2=canvas2.getContext('2d');

cxt2.moveTo(50,0);

cxt2.lineTo(0,100);

cxt2.lineTo(100,100);

cxt2.lineTo(50,0);

cxt2.strokeStyle="cyan";

cxt2.lineWidth=5;

cxt2.fillStyle="orange";

cxt2.fill();

cxt2.stroke();

// 在一个画布 画两个三角形--------------------------------------

var canvas3=document.getElementById("canvas3");

var cxt3=canvas3.getContext('2d');

// 第一个三角形

cxt3.beginPath();//开始创建路径

cxt3.moveTo(150,0);

cxt3.lineTo(150,80);

cxt3.lineTo(250,80);

// cxt3.lineTo(150,0);  可省略

cxt3.closePath();//关闭路径

cxt3.strokeStyle="yellow";//线条颜色

cxt3.lineWidth=2;//线条宽度

cxt3.fillStyle="green";//填充颜色

cxt3.stroke();//绘制命令

cxt3.fill();//填充命令

// 第二个三角形

cxt3.beginPath();//开始创建路径

cxt3.moveTo(100,100);

cxt3.lineTo(80,180);

cxt3.lineTo(200,200);

// cxt3.lineTo(100,100);   可省略

cxt3.closePath();//关闭路径

cxt3.strokeStyle="yellow";//线条颜色

cxt3.lineWidth=2;//线条宽度

cxt3.fillStyle="cyan";//填充颜色

cxt3.stroke();//绘制命令

cxt3.fill();//填充命令

// 多边形

cxt3.beginPath();//开始创建路径

cxt3.moveTo(250,200);

cxt3.lineTo(180,200);

cxt3.lineTo(150,250);

cxt3.lineTo(180,300);

cxt3.lineTo(250,300);

cxt3.lineTo(280,250);

cxt3.lineTo(250,200);

cxt3.closePath();//关闭路径

cxt3.strokeStyle="purple";//线条颜色

cxt3.lineWidth=2;//线条宽度

cxt3.fillStyle="orange";//填充颜色

cxt3.stroke();//绘制命令

cxt3.fill();//填充命令

// 绘制矩形--------------------------------------------------------

// cxt4.rect(x,y,width,height);

var canvas4=document.getElementById('canvas4');

var cxt4=canvas4.getContext('2d');

// 第一种方法

cxt4.rect(20,20,150,100);

cxt4.strokeStyle="black";

cxt4.lineWidth=5;

cxt4.fillStyle="orangered";

cxt4.stroke();

cxt4.fill();

// 第二种方法

cxt4.strokeRect(20,150,80,50);//直接绘制

// 第三种方法

cxt4.fillStyle="pink";

cxt4.fillRect(120,150,80,50);//填充加绘制  默认填充黑色

// 清空画布上的一块儿区域

cxt4.clearRect(130,160,30,30);

cxt4.clearRect(40,30,80,80);

// 绘制圆   或圆弧----------------------------------------------

// cxt.arc(x,y,radius,starAngle,endAngle,anticlockwise);

// x,y:圆心

// radius:半径

// starAngle,endAngle:开始角度，与终点角度;

// anticlockwise：顺时针(false),逆时针(true);anticlockwise:逆时针的

var canvas5=document.getElementById('canvas5');

var cxt5=canvas5.getContext('2d');

cxt5.beginPath();//开始画路径

cxt5.arc(50,50,50,0,Math.PI*2,false);

cxt5.closePath();//关闭路径

cxt5.fillStyle="red";

cxt5.fill();

cxt5.stroke();

// ------画弧-------------------------

cxt5.beginPath();

cxt5.arc(150,50,50,-Math.PI*0.5,Math.PI*0.5,false);

cxt5.closePath();

cxt5.fillStyle="pink";

cxt5.fill();

cxt5.stroke();

// 第二个弧

cxt5.beginPath();

cxt5.arc(50,150,50,Math.PI/4,-Math.PI*0.25,false);

cxt5.closePath();

cxt5.fillStyle="orangered";

cxt5.fill();

cxt5.stroke();

// 第三个弧

cxt5.beginPath();

cxt5.arc(150,150,50,Math.PI/4,-Math.PI*0.25,true);

cxt5.closePath();

cxt5.fillStyle="green";

cxt5.fill();

cxt5.stroke();

// 坐标变换

// cxt.translate(x,y)位移

// cxt.scale(x,y)缩放  不光图片宽高会缩放 起始坐标也会缩放

// cxt.rotate(angle)旋转 不光图形会旋转 坐标系也会旋转

// 解决使用多个位移后位置叠加的情况

// cxt.save();保存

// cxt.restore();恢复

var canvas6=document.getElementById('canvas6');

var cxt6=canvas6.getContext('2d');

cxt6.fillStyle="gray";

cxt6.save();

cxt6.translate(50,50);//位移

cxt6.fillRect(0,0,100,50);

cxt6.restore();

cxt6.save();

cxt6.fillStyle="green";

cxt6.translate(50,50);//相对于第一个矩形位移叠加了

cxt6.scale(2,1);

// 处理方法是用cxt.save();cxt.restore()将路径和位移包裹起来

// 旋转同样是这样处理

cxt6.fillRect(50,50,100,50);

cxt6.restore();

cxt6.fillStyle="red";

cxt6.save();

cxt6.translate(200,175);//让图片在（150,150）坐标

// cxt6.translate(50,50);

cxt6.rotate(30*Math.PI/180);

cxt6.fillRect(-50,-25,100,50);//让图片中心点与原点重合

cxt6.restore();

// ------------------实验 旋转 与 缩放----------------------

// 使canvas的旋转与缩放 以图片中心为基准  使效果与css3效果相同

var canvas7=document.getElementById('canvas7');

var cxt7=canvas7.getContext('2d');

var deg=0;

// cxt7.fillStyle='red';

// cxt7.save();

// cxt7.translate(200,150);//用位移确定 图片在画布中的位置

// // cxt7.rotate(180*Math.PI/180);

// // cxt7.scale(2,1);//此时用缩放也和css3一样了

// cxt7.fillRect(-100,-50,200,100);//先让图片的中心与原点重合1

// cxt7.restore();

function xz(){

    // cxt7.clearRect(0,0,500,500);

    deg=deg+2;

    cxt7.clearRect(0,0,500,500)

    cxt7.beginPath();

    cxt7.save();

    cxt7.translate(200,150);

    cxt7.rotate(deg*Math.PI/180);

    console.log(deg);

    cxt7.strokeRect(-100,-50,200,100);

    cxt7.restore();

    cxt7.closePath();

    if(deg>=360){

        deg=0;

        cxt7.clearRect(0,0,500,500)

    }

}

setInterval(xz,40);

// drawImage方法 加背景图像-----------------------------

// drawImage(image,x,y)

// drawImage(image,x,y,w,h)

// 参数说明

// image：img,video元素，或者javascript中的image对象，用来装载图片文件

// x,y:绘制图像时，在画布中的起始x,y坐标

// w,h:绘制时，设置图像的宽度和高度

// 使用方法：

// var img = new Image();//创建Image对象

// img.src="img/html.jpg";//设置图像路径

// img.onload=function(){//图像加载完之后，将图片放在canvas里面

//         context.drawImage(img,10,10);

// }

// clip()图像裁切方法

// 使用路径在画布上设置裁切区域

// 调用clip()方法设置裁切区域

// 例子

var canvas8=document.getElementById('canvas8');

var cxt8=canvas8.getContext('2d');

var img=new Image();//创建Image对象

img.src="img/Hydrangeas.jpg";//设置图像路径

img.onload=function(){

    cxt8.drawImage(img,0,0,500,500)

}

// cxt8.save();加了这对标签 就切不了图了 无解

cxt8.strokeStyle="cyan";

cxt8.lineWidth="7";

cxt8.arc(250,250,200,0,2*Math.PI,false);

cxt8.stroke();

cxt8.clip();

// cxt8.restore();

// -----------绘制文字----------------------------

// font:设置文本样式

// textAlign:水平对齐方式  left,right,center

// textBaseline:垂直对齐方式  top,middle,bottom

// 填充文字  fillText(text,x,y)

// 绘制文字轮廓  strokeText(text,x,y)

// 参数说明：

// text:要绘制的文字

// x,y:文字起点x,y坐标

// 例子

var canvas9=document.getElementById('canvas9');

var cxt9=canvas9.getContext('2d');

cxt9.font="50px 微润雅黑";

cxt9.fillStyle="pink";

cxt9.strokeStyle="blue";

cxt9.textBaseline="top";//默认是底部对齐

cxt9.textAlign="left";//默认水平对齐方式为左对齐

cxt9.fillText('你好，欢迎光临!',100,100);

cxt9.strokeText('哈哈哈哈',200,200);

cxt9.strokeText('你好，欢迎光临!',105,105);

</script>

</body>

</html>

canvas小实验的更多相关文章

  1. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  2. 两个Canvas小游戏

    或许连小游戏都算不上,可以叫做mini游戏. 没有任何框架或者稍微有点深度的东西,所以有js基础的或者要追求炫酷效果的可以直接ctrl+w了. 先贴出两个游戏的试玩地址: 是男人就走30步 是男人就忍 ...

  3. PBR综合小实验视频-狮子XL

    这个是上学时候录的一个策略路由小实验

  4. ubuntu下格式化内存当硬盘使的小实验

    内存虚拟硬盘(ramdisk)是指通过软件技术,将物理内存进行分割,将一部分内存通过虚拟技术转变为硬盘以较大幅度提升计算机数据读取速度和保护硬盘. 在ubuntu下的dev下有ram相关的文件,这些文 ...

  5. MongoDB 主从复制小实验

    MongoDB 主从复制小实验 操作环境描述:WIN8  64位操作系统,内装虚拟机为CentOS 5.5 32位系统. 操作描述:跟其他关系型数据库类似,在主库进行数据操作,将数据同步到从节点,从节 ...

  6. PS小实验-去除水印

    PS小实验-去除水印 水印是一些品牌商覆盖在图片或视频上的一个商标logo或小文本,比如大家最讨厌的百度logo,作者本人也是比较讨厌水印的,让好端端的一张图片变得美中不足. 个人觉得用photosh ...

  7. 1.4 Crack小实验

    0_day 第一章 基础知识 1.4 Crack小实验 <0day_2th>王清 著 电子书 下载链接:https://pan.baidu.com/s/11TgibQSC3-kYwCInm ...

  8. arduino新入手体验：三个小实验

    新入手体验:三个小实验 一:一个LED闪烁 控制要求:1个LED灯,每隔50ms闪烁一次 实物连接图: 控制代码: //2018.6/11 ;//定义数字接口10,对应 void setup() { ...

  9. [na]出口选路pbr小实验视频

    什么是策略路由? 一般都是部署在出口路由器,用于路径强制分发的, 优先级高于路由表. 策略路由小实验视频 这个是读书时候录的一个策略路由小实验

随机推荐

  1. Sql 中的索引

    转载:https://www.cnblogs.com/hyd1213126/p/5828937.html

  2. Ubuntu下安卓模拟器的选择

    8G内存的话,一般开个AS,再启动默认的模拟器的话,基本就有点卡了,如果再打开Idea,很容易卡死. 所以两个spingboot的后台服务只能直接命令行跑个jar包,不方便调试,webview加载的v ...

  3. JavaScript设计模式（策略模式）

    策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换.将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外,策略模式的目的就是将算法的使用与算法的实现分离开来 ...

  4. java三大框架——Struts + Hibernate + Spring

    Struts主要负责表示层的显示 Spring利用它的IOC和AOP来处理控制业务(负责对数据库的操作) Hibernate主要是数据持久化到数据库 再用jsp的servlet做网页开发的时候有个 w ...

  5. JVM学习(二)：垃圾回收

    我刚工作的时候问一个前辈,我们能针对JVM做出什么样的优化.前辈说,我们系统现在的性能并不需要调优,用默认的配置就能满足现在的需求了.我又问,那你为什么要看JVM相关的书呢?前辈微微一笑,悠悠地来了句 ...

  6. multiple类型的select option在django后台如何取值

    之前前端的select都是单选类型,在新的场景中允许用户选择多个条件, 前端的代码如下: <form action="{% url 'info:result-list' %}" ...

  7. odoo 关系字段(关联关系)

    Many-to-one关联 publisher_id = fields.Many2one(comodel_name= 'res.partner', domain='',context={},ondel ...

  8. deep_learning_Function_ Matplotlib 3D 绘图函数 plot_surface 的 rstride 和 cstride 参数

    今晚开始接触 Matplotlib 的 3D 绘图函数 plot_surface,真的非常强大,图片质量可以达到出版级别,而且 3D 图像可以旋转 ,可以从不同角度来看某个 3D 立体图,但是我发现各 ...

  9. 8.5.zookeeper应用案例_分布式应用HA

    1.实现分布式应用(主节点HA)及客户端动态更新主节点状态 需求:某分布式系统中,主节点可以有多台,服务器可以动态(变化)上下线,任意一台客户端都能实时感知到主节点服务器的上下线 思路:架设Zooke ...

  10. 解决国内安装tensorflow, opencv等安装不成功或下载太慢问题

    解决国内安装tensorflow, opencv等安装不成功或下载太慢问题 复制自博客:https://blog.csdn.net/jorg_zhao/article/details/80075293 ...