Canvas 简介
来源:互联网 发布:codecademy python 编辑:程序博客网 时间:2024/06/05 19:19
HTML5 中 canvas 标签用于绘制图像(通常是通过 JavaScript 脚本进行绘制)。canvas 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。getContext("2d") 对象属性和方法,可以在画布上绘制文本、线条、矩形、圆形等等。
canvas 提供了很多强大的属性和方法,实际项目开发中,常用于 HTML5 游戏开发、图形、图像开发等。
Internet Explorer 9+、Firefox、Opera、Chrome 以及 Safari 支持 canvas 及其属性和方法。
1.颜色、样式和阴影
示例:
(1)定义用红色填充的矩形
效果预览:
// html<canvas id="myCanvas" width="150" height="100"></canvas>// javascriptvar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#ff0000";ctx.fillRect(20,20,150,100);
(2)定义从黑到白的渐变(从左向右),作为矩形的填充样式
效果预览:
// html<canvas id="myCanvas" width="150" height="100"></canvas>// javascriptvar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var grd=ctx.createLinearGradient(0,0,170,0);grd.addColorStop(0,"black");grd.addColorStop(1,"white");ctx.fillStyle=grd;ctx.fillRect(20,20,150,100);
2.线条样式
示例:
(1)绘制圆形的结束线帽
效果预览:
// html<canvas id="myCanvas" width="150" height="100"></canvas>// javascriptvar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.lineCap="round";ctx.moveTo(20,20);ctx.lineTo(20,200);ctx.stroke();
3.矩形
示例:
(1)绘制 150*100 像素的矩形
效果预览:
// html<canvas id="myCanvas" width="250" height="150"></canvas>// javascriptvar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.rect(20,20,150,100);ctx.stroke();
4.路径
示例:
(1)绘制一条路径,形状是绿色的字母 L
效果预览:
// html<canvas id="myCanvas" width="250" height="150"></canvas>// javascriptvar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.moveTo(20,20);ctx.lineTo(20,100);ctx.lineTo(70,100);ctx.strokeStyle="green";ctx.stroke();
5.转换
示例:
(1)绘制矩形,放大到 200%,然后再次绘制矩形
效果预览:
// html<canvas id="myCanvas" width="250" height="150"></canvas>// javascriptvar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.strokeRect(5,5,25,15);ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
6.文本
示例:
(1)在画布上写一段 40 像素的文本,使用的字体是 "Arial"
效果预览:
// html<canvas id="myCanvas" width="250" height="150"></canvas>// javascriptvar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="40px Arial";ctx.fillText("Hello World",10,50);
(2)使用 fillText(),在画布上写文本 "Hello world!" 和 "JIKE"
效果预览:
// html<canvas id="myCanvas" width="250" height="150"></canvas>// javascriptvar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="20px Georgia";ctx.fillText("Hello World!",10,50);ctx.font="30px Verdana";// 创建渐变var gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// 用渐变填色ctx.fillStyle=gradient;ctx.fillText("JIKE",10,90);
7.图像绘制
8.像素操作
示例:
(1)创建 100*100 像素的 ImageData 对象,其中每个像素都是红色的,然后把它放到画布上
效果预览:
// html<canvas id="myCanvas" width="250" height="150"></canvas>// javascriptvar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var imgData=ctx.createImageData(100,100);for (var i=0;i<imgData.data.length;i+=4){ imgData.data[i+0]=255; imgData.data[i+1]=0; imgData.data[i+2]=0; imgData.data[i+3]=255;}ctx.putImageData(imgData,10,10);
9.合成
示例:
(1)首先,绘制一个红色的矩形,然后将透明度 (globalAlpha) 设置为 0.2,然后再绘制一个绿色和一个蓝色的矩形
效果预览:
// html<canvas id="myCanvas" width="250" height="150"></canvas>// javascriptvar c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="red";ctx.fillRect(20,20,75,50);// 调节透明度ctx.globalAlpha=0.2;ctx.fillStyle="blue";ctx.fillRect(50,50,75,50);ctx.fillStyle="green";ctx.fillRect(80,80,75,50);
10.其它
11.总结
从以上的介绍中能够了解到,canvas 元素对象有很多的属性和方法,它足以做为单独的技能来深入的学习。要理解并掌握在项目中运用这些属性和方法,仅靠本次课程的这些内容还远远不够,可以在极客学院学习canvas 的专属课程。
- Canvas 简介
- VML、SVG、Canvas简介
- android canvas简介
- Canvas,Paint简介
- Canvas类简介
- HTML5中canvas API 简介
- Canvas 简介及适配
- html5学习笔记---03. Canvas简介,Canvas的使用方法
- <html5>1.什么是HTML5、Canvas的简介
- android初学之Context、@Override、Canvas简介
- HTML5 1 简介和Canvas画布
- HTML5-Canvas简介line to&move to
- Canvas
- Canvas
- canvas
- Canvas
- Canvas
- canvas
- Android如何让你的第三方库可以compile的形式被使用
- 深入分析Java ClassLoader原理
- Java Web day(3)之Tomcat及Http协议详细介绍
- POJ1426 Find The Multiple(DFS)
- C语言printf和scanf函数
- Canvas 简介
- Android 代码在Unity中的层级调用
- Drools6.4动态加加载规则之(三)kie-wb与kie-server的集群应用
- 【软考之软件过程模型总结】
- PS Axure小结
- 沉浸式状态栏
- level遍历117. Populating Next Right Pointers in Each Node II
- VR学习第九节:VR+旅游 VR+房地产
- 07-图5 Saving James Bond - Hard Version (30分)