<!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. java8 List对象集合去重

    //测试数据 WaterMeter w0 = new WaterMeter(); WaterMeter w1 = new WaterMeter(); WaterMeter w2 = new Water ...

  2. Springboot导出Excel并下载

    引入相关依赖 <!--数据导出excel--> <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> & ...

  3. poj 3320 复习一下尺取法

    尺取法(two point)的思想不难,简单来说就是以下三步: 1.对r point在满足题意的情况下不断向右延伸 2.对l point前移一步 3.  回到1 two point 对连续区间的问题求 ...

  4. XML转换成DataTable

    #region XML转dataset //str 是xml字符串 public static DataTable GetResultXMLToDataTable (string str,string ...

  5. vue 编辑

    点击文字修改 <div class="baseInfo"> <p class="title">基本信息</p> <p ...

  6. webpack升级4出现的问题

    webpack3升级到4出现了很多问题,经过验证报错信息如下 1 Module parse failed: Unexpected token (:) You may need an appropria ...

  7. ASE19 团队项目 模型组 scrum report集合

    scrum report 链接 scrum1 report scrum2 report scrum3 report scrum4 report scrum5 report scrum6 report ...

  8. 【1】Zookeeper概述

    一.前言 在"网络是不可靠的"这一前提下,分布式系统开发需要解决如下四个问题: 客户端如何访问众多服务?  解决方案:服务聚合,使用API网关 服务于服务之间如何通信?  解决方案 ...

  9. DataGrip导出查询结果数据

    1 按钮 2 选择保存位置即可

  10. Jumpserver1.4.1安装

    第1章 CentOS环境准备 Jumpserver官网: http://docs.jumpserver.org/zh/docs/step_by_step.html 测试推荐硬件 CPU: 64位双核处 ...