canvas标签(1)--线条、矩形、圆形、文本、阴影、抛小球
2016-06-29 09:24
381 查看
从网上扒拉的代码,敲了敲代码玩。
html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了
以上是主体部分。
注意在<canvas>里的内容是无法显示在支持canvas标签的浏览器的。
1.绘制路径
2.绘制矩形
3.绘制文本
4.绘制圆形
5.设置渐变色
6.设置阴影
7.利用JavaScript,可以在canvas元素上很容易地产生动画效果。
例1:
例2:
例3:
html页面显示内容很简单,只要写个canvas标签,给他一个id写js就可以了
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Canvas API</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="jquery-1.11.3.js"></script> </head> <body> <canvas id="myCanvas" width="1100" height="600"> 您的浏览器不支持canvas! </canvas> </body>
以上是主体部分。
注意在<canvas>里的内容是无法显示在支持canvas标签的浏览器的。
1.绘制路径
<script type="text/javascript"> var canvas = document.getElementById("myCanvas"); if(canvas.getContext){ var ctx = canvas.getContext("2d"); //(1)绘制路径 ctx.beginPath();// 开始路径绘制 ctx.moveTo(0, 0);// 设置路径起点,坐标为(20,20) ctx.lineTo(200, 0);// 绘制一条到(200,20)的直线 ctx.lineWidth = 1.0;// 设置线宽 ctx.strokeStyle = "#CC0000";// 设置线的颜色 ctx.stroke(); // 进行线的着色,这时整条线才变得可见 //fillRect(x, y, width, height)方法用来绘制矩形,它的四个参数分别为矩形左上角顶点的x坐标、y坐标,以及矩形的宽和高。fillStyle属性用来设置矩形的填充色。
2.绘制矩形
//(2)绘制矩形 ctx.fillStyle = 'yellow'; ctx.fillRect(50, 50, 200, 100); //strokeRect方法与fillRect类似,用来绘制空心矩形。 ctx.strokeRect(10,10,200,100); //clearRect方法用来清除某个矩形区域的内容。 ctx.clearRect(100,50,50,50); ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
3.绘制文本
//(3)绘制文本 //fillText(string, x, y) 用来绘制文本,它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前,需用font设置字体、大小、样式(写法类似与CSS的font属性)。与此类似的还有strokeText方法,用来添加空心字。 // 设置字体 ctx.font = "Bold 20px Arial"; // 设置对齐方式 ctx.textAlign = "left"; // 设置填充颜色 ctx.fillStyle = "#008600"; // 设置字体内容,以及在画布上的位置 ctx.fillText("Hello!", 10, 50); // 绘制空心字 ctx.strokeText("Hello!", 10, 100); } //fillText方法不支持文本断行,即所有文本出现在一行内。所以,如果要生成多行文本,只有调用多次fillText方法
4.绘制圆形
//(4)绘制圆 //arc方法的x和y参数是圆心坐标,radius是半径,startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示),anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)。 //下面是如何绘制实心的圆形。 ctx.beginPath(); ctx.arc(600, 60, 50, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.fill(); //绘制空心圆的例子 ctx.beginPath(); ctx.arc(600, 200, 50, 0, Math.PI*2, true); ctx.lineWidth = 1.0; ctx.strokeStyle = "#000"; ctx.stroke();
5.设置渐变色
//(5)设置渐变色 //createLinearGradient方法用来设置渐变色。 var myGradient = ctx.createLinearGradient(0, 0, 0, 160); myGradient.addColorStop(0, "#BABABA"); myGradient.addColorStop(1, "#636363"); //createLinearGradient方法的参数是(x1, y1, x2, y2),其中x1和y1是起点坐标,x2和y2是终点坐标。通过不同的坐标值,可以生成从上至下、从左到右的渐变等等。使用方法如下: ctx.fillStyle = myGradient; ctx.fillRect(10,10,200,100);
6.设置阴影
//(6)设置阴影 //一系列与阴影相关的方法,可以用来设置阴影。 ctx.shadowOffsetX = 10; // 设置水平位移 ctx.shadowOffsetY = 10; // 设置垂直位移 ctx.shadowBlur = 5; // 设置模糊度 ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色 ctx.fillStyle = "#CC0000"; ctx.fillRect(10,10,200,100);} //利用JavaScript,可以在canvas元素上很容易地产生动画效果。
7.利用JavaScript,可以在canvas元素上很容易地产生动画效果。
例1:
var posX = 20, posY = 100; setInterval(function() { ctx.fillStyle = "black"; ctx.fillRect(0,0,canvas.width, canvas.height); posX += 1; posY += 0.25; ctx.beginPath(); ctx.fillStyle = "white"; ctx.arc(posX, posY, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); }, 30);} /*上面代码会产生一个小圆点,每隔30毫秒就向右下方移动的效果。setInterval函数的一开始,之所以要将画布重新渲染黑色底色,是为了抹去上一步的小圆点。 通过设置圆心坐标,可以产生各种运动轨迹。 先上升后下降。*/
例2:
var vx = 10, vy = -10, gravity = 1; } setInterval(function() { posX += vx; posY += vy; vy += gravity; ctx.fillStyle = "black"; ctx.fillRect(0,0,canvas.width, canvas.height); ctx.beginPath(); ctx.fillStyle = "white"; ctx.arc(posX, posY, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); },120); /*上面代码中,x坐标始终增大,表示持续向右运动。y坐标先变小,然后在重力作用下,不断增大,表示先上升后下降。 小球不断反弹后,逐步趋于静止
例3:
var vx = 10, vy = -10, gravity = 1; } setInterval(function() { posX += vx; posY += vy; if (posY > canvas.height * 0.75) { vy *= -0.6; vx *= 0.75; posY = canvas.height * 0.75; } vy += gravity; },20); //上面代码表示,一旦小球的y坐标处于屏幕下方75%的位置,向x轴移动的速度变为原来的75%,而向y轴反弹上一次反弹高度的40%。
相关文章推荐
- Java-解压和打包Jar
- scrollview嵌套gridview显示不全解决办法
- mysql正则
- redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resourc
- Http请求头POST以及GET提交
- java jar 打包命令
- 小白进阶之贪心算法VS动态规划
- 实时刷新缓存-处理mysql主从延迟的一些设计方案
- 线程与进程
- OA,ERP等源码一部分演示
- 动态库和静态库的区别
- java中String s=”abc“及String s=new String("abc")
- 数据库损坏解决:数据库已损坏,无法分配空间
- Android基础--简单介绍Application
- VC6.0蕉HOOK_timeGetTime 达到变速效果
- 子线程操作malloc内存
- leetcode@ [316] Remove Duplicate Letters (Stack & Greedy)
- 缓存外部系统接口返回信息的方案
- iOS Provisioning Profile总莫名其妙失效问题
- 大数据的仓库Hive原理(二)