<!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. Vasya and Magic Matrix CodeForces - 1042E (概率dp)

    大意:给定n*m矩阵, 初始位置(r,c), 每一步随机移动到权值小于当前点的位置, 得分为移动距离的平方, 求得分期望. 直接暴力dp的话复杂度是O(n^4), 把距离平方拆开化简一下, 可以O(n ...

  2. AI面试必备/深度学习100问1-50题答案解析

    AI面试必备/深度学习100问1-50题答案解析 2018年09月04日 15:42:07 刀客123 阅读数 2020更多 分类专栏: 机器学习   转载:https://blog.csdn.net ...

  3. EntityFramework学习要点记一

    一.Entity的注解属性(Annotations)不管是code first还是db first,都需要用到注解属性,至于用System.ComponentModel.DataAnnotations ...

  4. opencv 仿射变换 投射变换， 单应性矩阵

    仿射 estimateRigidTransform():计算多个二维点对或者图像之间的最优仿射变换矩阵 (2行x3列),H可以是部分自由度,比如各向一致的切变. getAffineTransform( ...

  5. JS 中的跨域请求

    跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了. 比如,一个带有其他域名的 src 的 <img> 标签,以及 ...

  6. UEFI笔记 --- PeiReadOnlyVariable2->GetVariable()

    问:在PEI阶段,PeiReadOnlyVariable2->GetVariable()可以从Pei Hob或NV RAM中获取UEFI变量,例如Setup默认值.若平台首次烧录BIOS并开机, ...

  7. 进程、线程、协程的基本解析（python代码）

    进程什么是进程?程序就是一堆放在磁盘上的代码,进程是一段程序的运行过程正规点说,进程一般由程序.数据集.进程控制块三部分组成 什么进程切换?进程切换是,一个正在运行的进程被中断,操作系统指定另一个进程 ...

  8. Go学习笔记【一、概述】

    工作需要,即将要把部分查询计算的逻辑翻译成Go语言,来提升查询效率 在此需要对Go语言进行学习,先把入门教程浏览了一遍,发现有些语法和C很类似,还有部分类似于Python,还没有深入学习,先开个坑,业 ...

  9. XML基础综合案例【三】

    实现简单的学生管理系统 使用xml当做数据,存储学生信息 ** 创建一个xml文件,写一些学生信息 ** 增加操作1.创建解析器2.得到document 3.获取到根节点4.在根节点上面创建stu标签 ...

  10. deep_learning_RNN序列模型

    吴恩达<深度学习-序列模型>1 --循环序列模型:https://blog.csdn.net/weixin_41043240/article/details/79415134