<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
canvas{background: #F5F5F5}
</style>
</head>
<body>
<canvas id="canvas1" width="900" height="1200">
当前浏览器不支持canvas
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('canvas1');//定义变量获取画布DOM
var context=canvas.getContext('2d');//设置绘图环境为2d
context.lineWidth=4;
context.strokeStyle="#FF00FF";
context.moveTo(200,100);
context.lineTo(200,200);
context.lineTo(250,200);
context.lineTo(250,150);
context.lineTo(150,150);
context.lineTo(150,200);
context.lineTo(200,200);
context.lineTo(200,250);
//context.closePath();//从当前点回到起始点来封闭路径
context.stroke();
//绘制矩形
context.beginPath();//此句不能省,否则上面的图样式会受下面的设置影响
context.lineWidth=2;
context.strokeStyle="#0000FF";
context.rect(260,100,50,20) //语句结尾分号;可省
context.stroke(); context.beginPath();
context.strokeRect(320,100,50,30); context.beginPath();
context.lineWidth=2;
context.fillStyle="#FF0000";
context.rect(380,100,40,20);
context.fill(); context.beginPath();
context.lineWidth=2;
context.fillStyle="#00FF00";
context.fillRect(430,100,50,50); context.beginPath();
context.lineWidth=3;
context.arc(500,200,50,0,(Math.PI)/2);//默认false顺时针,可设置true逆时针
context.stroke(); context.beginPath();
context.lineWidth=3;
context.arc(600,200,50,0,(Math.PI)/2);//默认false顺时针,可设置true逆时针
context.fill();
context.stroke(); context.beginPath();
context.arc(600,100,50,0,(Math.PI)/2);
context.stroke(); context.beginPath();
context.arc(700,100,50,0,(Math.PI)/2);
context.closePath();
context.fill();
context.stroke(); //绘制扇形,思路很好!
context.beginPath();
context.strokeStyle="#F5F5F5";
context.moveTo(200,400);
context.arc(200,400,150,Math.PI*7/6,Math.PI*11/6);
context.fill();
context.stroke();
context.beginPath();
context.fillStyle="#F5F5F5";
context.strokeStyle="#F5F5F5";
context.moveTo(200,400);
context.arc(200,400,50,Math.PI*7/6,Math.PI*11/6);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(200,400);
context.lineWidth=5;
context.arc(200,400,50,Math.PI*11/6,Math.PI*11/6);
context.stroke(); context.beginPath();
context.lineWidth=1;
context.strokeStyle="#000000";
context.fillStyle="#000000";
context.font="40px 隶书";
context.strokeText("黄山",280,400);
context.fillText("天柱山",380,400);
context.strokeStyle="#FFFF00";
context.fillStyle="#00FFFF";
context.fillText("方特欢乐世界",500,400);
context.strokeText("方特欢乐世界",500,400); //线性渐变
g=context.createLinearGradient(100,450,300,300);
g.addColorStop(0,"#000000");
g.addColorStop(0.2,"#ffffff");
g.addColorStop(0.4,"#FF0000");
g.addColorStop(0.6,"#00ff00");
g.addColorStop(1,"#0000ff");
context.fillStyle=g;
context.fillRect(100,450,300,300) //放射性渐变
r=context.createRadialGradient(650,550,0,650,550,100);
r.addColorStop(0,"#000000");
r.addColorStop(0.2,"#ffffff");
r.addColorStop(0.4,"#FF0000");
r.addColorStop(0.6,"#00ff00");
r.addColorStop(1,"#0000ff");
context.fillStyle=r;
context.arc(650,550,100,0,Math.PI*2);
context.fill(); //太极图
g1=context.createLinearGradient(40,920,320,920);
g1.addColorStop(0,"#000000");
g1.addColorStop(1,"#ffffff"); g2=context.createLinearGradient(40,920,320,920);
g2.addColorStop(0,"#ffffff");
g2.addColorStop(1,"#000000"); g3=context.createRadialGradient(120,1000,0,120,1000,10);
g3.addColorStop(0,"#ffffff");
g3.addColorStop(1,"#000000"); g4=context.createRadialGradient(280,1000,0,280,1000,10);
g4.addColorStop(0,"#000000");
g4.addColorStop(1,"#ffffff"); context.beginPath();
context.arc(200,1000,160,0,Math.PI);
context.arc(120,1000,80,0,Math.PI,true);
context.arc(280,1000,80,Math.PI,0,true);//没看懂为什么会反着颜色?
context.fillStyle=g1;
context.fill();//上面的疑问懂了:fill功能是把上面3个弧围成的区域填充! context.beginPath();
context.arc(200,1000,160,0,Math.PI,true);
context.arc(280,1000,80,0,Math.PI);
context.arc(120,1000,80,Math.PI,0);
context.fillStyle=g2;
context.fill(); context.beginPath();
context.fillStyle=g3;
context.arc(120,1000,10,0,Math.PI*2);
context.fill(); context.beginPath();
context.fillStyle=g4;
context.arc(280,1000,10,0,Math.PI*2);
context.fill(); //设置文字阴影
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.shadowBlur=5;
context.shadowColor="red";
context.fillStyle="blue";
context.font="70px 隶书";
context.fillText("舌尖上的中国",400,700); //绘制饼图
context.beginPath();
context.shadowOffsetX=0;
context.fillStyle="black";
context.shadowColor="gray";
context.fillText("绘制饼图",400,800);
context.fillStyle="red";
context.moveTo(700,1000);
context.arc(700,1000,150,0,Math.PI/3);
context.fill();
context.closePath();//还可设closePath();
context.beginPath();
context.fillStyle="blue";
context.moveTo(700,1000);
context.arc(700,1000,150,Math.PI/3,Math.PI);
context.fill();
context.closePath();
context.beginPath();
context.fillStyle="green";
context.moveTo(700,1000);
context.arc(700,1000,150,Math.PI,Math.PI*5/3);
context.fill();
context.closePath();
context.beginPath();
context.fillStyle="yellow";
context.moveTo(700,1000);
context.arc(700,1000,150,Math.PI*5/3,Math.PI*2);
context.fill();
context.closePath();
context.fillStyle="black";
context.font="20px 隶书";
context.fillText("15%",750,1050);
context.fillText("35%",650,1050);
context.fillText("35%",650,950);
context.fillText("15%",750,950);
</script>
</body>
</html>

【HTML5】Canvas的更多相关文章

  1. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  2. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  3. 【HTML5】Canvas 内部元素添加事件处理

    前言 canvas 没有提供为其内部元素添加事件监听的方法,因此如果要使 canvas 内的元素能够响应事件,需要自己动手实现.实现方法也很简单,首先获得鼠标在 canvas 上的坐标,计算当前坐标在 ...

  4. 【HTML5】Canvas图像

    把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象.   显示一个canvas图像: <!DOCTYPE html> &l ...

  5. 【HTML5】canvas画布练习

    第一步:获取画布元素 var canvas = document.getElementById("myCanvas"); var context = canvas.getConte ...

  6. 【HTML5】Canvas 实现放大镜效果

    图片放大镜 效果 在线演示    源码 原理 首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化 <canvas id=&qu ...

  7. 【HTML5】Canvas和SVG的区别

    * SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...

  8. 【HTML5】Canvas之globalCompositeOperation属性详解

    globalCompositeOperation即Canvas中的合成操作. 1.source-over 这是默认值,他表示绘制的图形将画在现有画布之上 <!DOCTYPE html> & ...

  9. 【HTML5】Canvas绘图详解-1

    ----->Canvas绘制基础 1,线条绘制 1-1,线条组成的图形和beginPath 案例:绘制由不同颜色的线条组成的图案 1-2,多边形的填充和closePath 案例:绘制封闭具有填充 ...

随机推荐

  1. 【O】VSS 2005上传PDF文件之后,打开提示文件损坏或者内容为空

    问题: VSS 2005上传PDF文件之后,打开提示文件损坏或者内容为空: 解决方式: 在vss的客户端的tools-option中,file type选项卡里,在binary file文本框中,加入 ...

  2. javaweb-3-在Eclipse中引入Tomcat

    一.在Eclipse中引入Tomcat 第一步: 第二步: 第三步: 第四部:

  3. 社群公会GangSDK:程序员入行AI领域需要哪些技能?

    作为一名Android开发工程师,身边总有些同行很焦虑,看着人工智能越来越火,总是担心Android要不行了,所以,我们需要转行么?Android还能走多久?其实,无论是对于Android还是iOS开 ...

  4. spring boot自定义log4j2日志文件

    背景:因为从 spring boot 1.4开始的版本就要用log4j2 了,支持的格式有json和xml两种格式,此次实践主要使用的是xml的格式定义日志说明. spring boot 1.5.8. ...

  5. excel vlookup

    今天在百度知道的时候,看到旁边有人问excel中条件查找vlookup的问题,有几位高手都知道使用vlookup作答,可惜都是没有经过测试,直接复制别人的答案,让所有的读者都无法实施,一头雾水.今天我 ...

  6. 转:聚类、K-Means、例子、细节

    今天说聚类,但是必须要先理解聚类和分类的区别,很多业务人员在日常分析时候不是很严谨,混为一谈,其实二者有本质的区别. 分类其实是从特定的数据中挖掘模式,作出判断的过程.比如Gmail邮箱里有垃圾邮件分 ...

  7. HBase表预分区与压缩

    1.建立HBase预分区表.sql语句如下: create 'buyer_calllogs_info_ts', 'record', {SPLITS_FILE => 'hbase_calllogs ...

  8. Java数据结构和算法(五)——队列

    前面一篇博客我们讲解了并不像数组一样完全作为存储数据功能,而是作为构思算法的辅助工具的数据结构——栈,本篇博客我们介绍另外一个这样的工具——队列.栈是后进先出,而队列刚好相反,是先进先出. 1.队列的 ...

  9. websocket介绍

    websocket应用 手动实现的websocket 你所见过的websocket 你一定见过在网站中,有一个游客聊天的聊天框,比如人人影视.这个聊天框是如何实现即时通讯的呢,就是用到了websock ...

  10. JavaScript--我发现,原来你是这样的JS:函数表达式和闭包

    一.介绍 本次博客主要介绍函数表达式的内容,主要是闭包. 二.函数表达式 定义函数的两种方式:一个是函数声明,另一个就是函数表达式. //1.函数声明写法 function fn2(){ consol ...