<!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. iview给布局MenuItem标签绑定点击事件

    @click.native="menuHandleClick"

  2. windowsformshost mouse event not transmit to it's parent control

    in the case you can do it to fix: MouseEventArgs e = new MouseEventArgs(Mouse.PrimaryDevice, 0); e.R ...

  3. ModbusRtu通信报文详解【二】

    这里接着上一篇内容对ModbusRtu的通信报文做个详细描述: [1]强制单个线圈 功能码:05H [2]预置单个寄存器 功能码:06H [3]强制多个线圈 功能码;0FH [4]预置多个寄存器 功能 ...

  4. 【原创】Linux基础之logrotate

    logrotate logrotate ‐ rotates, compresses, and mails system logs logrotate is designed to ease admin ...

  5. C++:函数先声明后实现

    贼神奇的是,直到昨天在写flex规则的时候我才知道C++中的函数要么在使用之前先定义,要么将实现放在调用之前,不允许先调用后实现.之前一年多竟然不知道这件事,汗````,当然也是可能这件事本身和我思考 ...

  6. ie8 下的半透明 background:rgba 与opacity失效 兼容办法

    fliter: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);

  7. java 中 get post

    package wzh.Http; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr ...

  8. 编辑docker容器中的文件

    一般docker中没有VI或者其它相应的文本编辑器,为了写个东西安装个vi就可以解决问题,除此之外还有别的办法 登陆docker中找到需要编辑的文件的位置 sudo docker ps -a sudo ...

  9. vue+axios请求头封装

    import { mapMutations } from 'vuex' import axios from 'axios' import { Toast } from 'mint-ui'; impor ...

  10. SYSLINUX官方文档

    帮助正确认识SYSLINUX http://www.syslinux.org/wiki/index.php/Doc/syslinux http://www.syslinux.org/wiki/inde ...