canvas学习笔记（一）-认识canvas

最新推荐文章于 2022-11-15 20:40:07 发布
最新推荐文章于 2022-11-15 20:40:07 发布
阅读量1.1k 收藏
点赞数
分类专栏： firefox os
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GameLife_lch/article/details/9202247
版权
canvas是html5新增的一个标签，主要用于图形的绘制。我们可以把它理解为是浏览器给我们提供了一个画板，至于要绘制怎样的画卷，就看神笔马良你的主意了。而在canvas上绘制图形使用的笔，就是js了。
使用canvas绘图大致分为如下几个步骤
1.创建一个canvas标签，指定id、width、height属性
[html]
<canvas id=’firstCanvas’ width=’400′ height=’300′>不支持canvas标签</canvas>
[/html]
2.获取canvas对象
跟获取其他dome对象一样，可以使用dome对象获取的方式获取canvas对象
[javascript]
var canvas = document.getElementById(‘firstCanvas’);
[/javascript]
3.获取上下文
[javascript]
var context = canvas.getContext(’2d’);
[/javascript]
目前只有2d模式
4.设置画笔的样式
画笔的样式比较丰富，如设置填充的颜色
[javascript]
context.fillStyle = "#EEEEFF";
[/javascript]
5.绘制图形
canvas也提供了很多图形绘制的api，如填充一个矩形框
[javascript]
context.fillRect(50,50,100,100);
[/javascript]

下面我们利用以上步骤，绘制一些简单的图形

[html]
<!DOCTYPE html>
<html>
<head>
<title>canvas01</title>
<meta charset="UTF-8" />
<script type="text/javascript">
function draw(id) {
//步骤二：获取canvas对象
var canvas = $(id);
if (null == canvas) {
return;
}//步骤二END
//步骤三：获取上下文
var context = canvas.getContext(’2d’);
//步骤三END
//步骤四：设置画笔样式
context.fillStyle = "#EEEEFF";
//步骤四END
//步骤五：绘制图形
context.fillRect(0, 0, 400, 300);
//步骤五END

//以下是重复步骤四-步骤五
context.fillStyle = ‘red’;
context.lineWidth = 1;
context.fillRect(50, 50, 100, 100);
context.strokeStyle = ‘blue’;
context.strokeRect(50, 50, 100, 100);
}

function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<!– 步骤一：创建canvas标签 –>
<canvas id="canvas01" width="400" height="300">
浏览器不支持canvas标签
</canvas>
</body>
</html>
[/html]

更多学习资料html5 firefox os javascript 请到5狐网，源码下载


春天码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5中canvas学习笔记2-判断浏览器是否支持canvas
11-21
判断浏览器是否支持canvas，具体代码如下： 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
12-14
现在以用canvas画一个对角线为例： 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ getCanvas(); }; //...
html5 -- canvas使用(1)
聪明勇敢有力气的博客
11-07 1694
cavas使用
canvas学习笔记
weixin_42119967的博客
09-06 237
canvas学习笔记 1.函数的四种调用模式 1.函数调用模式 function add( a, b) { this.result = a + b; } add( 3, 9 ); //此方法执行的时候，this指向了window console.log(result); 2.构造器调用模式 function Persion（）{ this.name = "...
html5 canvas浅介（二）
胡世林的博客
08-06 498
简单的使用canvas画图形
入门HTML5 canvas 这一篇文章就够了
qq_41555473的博客
08-20 297
canvas: //简而言之，canvas就是像是画面上的一个遮罩层，画布，我们可以在canvas画布上做样式 canvas标签的宽高属性不要在css中设置 canvas=document.querySelector(“canvas”); ctx=canvas.getContext(“2d”); 矩形：绘制矩形：ctx.fillRect(10,10,55,50) //参数解释，前两个参数是画布中的位置，后两个参数是所创建矩形的宽高 填充矩形(颜色)： ctx.fillStyle=“rgb(200
HTML5 Canvas ( 矩形的绘制 ) rect, strokeRect, fillRect
weixin_34391854的博客
03-25 167
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas&lt;/title&gt; &lt;script type="text/javascript" src="../js/jQuery.js&
Canvans （一）初识
sinat_37138973的博客
01-20 2479
介绍 <canvas>元素用来绘制2D图形（可以通过改变位置实现伪3D效果，WebGL 使用了基于OpenGL ES的3D上下文）。 Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px，可以修改）。 <canvas id="tutorial" width="150" height="150"></canvas> canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。 var canvas = docume
canvas
09-07 74
canvas --- 简单点说： 就是画布， html5 出现的新标签， 它有自己本身的属性、方法、事件， 可以通过js来调用他进行绘图 ie9以上支持 context ：封装了很多绘图功能的对象，获取对象的方法： var cxt = canvas.getContext('2d'); canvas绘图： 方法一： cxt.fillStyle; cxt.fi...
html坐标绘制路径,html5之Canvas路径绘图、坐标变换应用实例
weixin_34585343的博客
05-30 219
在上一篇中我们了解html5的canvas ，在这一篇中不用多说，写一个html5的时钟应用程序试手。在这里主要设置了坐标变换的平移(translate)和旋转变换(ratate)，以及html5 canvas的路径绘图，beginpath，closepath，rect，arc等，还有就是html5 canvas路径绘图重要的绘图状态的保存和恢复机制，save，restore。多的也不说了，直接上...
canvas学习笔记之绘制简单路径
01-21
1 线段（直线路径） 绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画线样式，绘制当前或已经存在的路径 ...
学习Canvas基础-绘制矩形
qq_67983277的博客
11-15 4700
学习Canvas基础-绘制矩形
html5 rect()、fillrect()、strokeRect()的区别
u013182438的博客
03-24 9521
1.rect() 方法是单纯的画出一个矩形框 例如： canvas test your browser does not support HTML5 canvas tag! var c = document.getElementById('mytest'); var ctx = c.getContext('2d'); ctx.rect(
一款不错的Andriod日程管理软件源码
GameLife_lch的专栏
06-13 3717
一款功能比较全的Android日程管理的软件、可以看日程也可对当前的时间进行设置，设置提醒时间，也可对所选定的时间进行填写内容，是一款功能很全的Android日程管理软件，希望能够给大家带来一些帮助。 下载地址
魔塔源码
GameLife_lch的专栏
07-14 2916
这事一款不错的游戏，这个demo帮助开发者快速的入门学习html游戏编程，大家可以下载来运行看效果，也可以移植到新的firefox os 手机上运行看看！！ 源码下载
如何让你的安卓手机瞬间变Firefox os 畅玩firefox os 应用
GameLife_lch的专栏
09-29 2279
Firefox os 手机迟迟不能在国内大面积上市，现在能买到的Firefox os手机国内就一款Firefox os ZET OPEN C ,但这款手机配置确实还不如人意，价格方面也不实惠，对于我们火狐os爱好者来说真的是一种煎熬的等待与选择，但今天我想告诉你其Firefox os 离我们并不远了，今天我就以图文的方式教大家如何在我们已有的android 手机设备上玩firefox os应用！！
5狐网教你从零基础做Firefox os 手机应用开发赚money
GameLife_lch的专栏
07-03 2183
如果你还没有接触过web编程，这里有基础教程教你怎样一步一步学习开发，如果你已经是一个web编程基础的人，那你就很容易将web编程放到手机上，轻松教你移植web应用游戏到Firefox手机应用再发布到类似安卓市场类的Firefox os 应用市场赚取你的广告费或者付费应用吧，现在应用市场上的应用还没有像android那样多，所以先上传就赢得了更多用户的下载安装 第一步没有手机安装模拟器  Fir
firefox os 框架结构及调用机制
GameLife_lch的专栏
05-28 2155
最近学习了一些新的比较前沿的东西，贴出来和大家分享，我想成功是留给少数人的，抓住比较前沿的东西学习也是一件有意义的事！！嘿嘿！！  http:// Gecko-js async Communicate With Gaia 1.   DOM request        Once we use the refer interface, it would return a DOMR
Firefox os 游戏源码之全面寻找房祖名
GameLife_lch的专栏
08-26 2041
最近娱乐圈中的监狱风云是炒的风声水起，今天就给大家献上一个Firefox os 游戏源码,全民寻找房祖名，希望大家喜欢！ 下载地址：
canvas红包雨学习笔记
最新发布
05-13
Canvas红包雨是一种基于HTML5 Canvas技术开发的节日效果，通过JavaScript控制红包的下落和动画效果，实现一个红包雨的动态效果。 下面是Canvas红包雨的开发流程： 1. HTML页面中添加Canvas画布，并设置画布的宽高和样式。 ```html <canvas id="canvas"></canvas> ``` ```css #canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; } ``` 2. 在JavaScript中获取Canvas画布对象，并设置画布的宽高。 ```javascript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ``` 3. 定义红包对象，包括红包的位置、速度、大小和颜色等属性。 ```javascript function RedPacket(x, y, vx, vy, size, color) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.size = size; this.color = color; } ``` 4. 在Canvas画布上绘制红包，并实现红包的下落和动画效果。 ```javascript var redPackets = []; // 存储红包对象的数组 function drawRedPacket(redPacket) { ctx.beginPath(); ctx.arc(redPacket.x, redPacket.y, redPacket.size, 0, 2 * Math.PI); ctx.fillStyle = redPacket.color; ctx.fill(); } function updateRedPacket(redPacket) { redPacket.x += redPacket.vx; redPacket.y += redPacket.vy; redPacket.vy += gravity; } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < redPackets.length; i++) { drawRedPacket(redPackets[i]); updateRedPacket(redPackets[i]); } requestAnimationFrame(animate); } requestAnimationFrame(animate); ``` 5. 实现红包的自动生成和动态效果，可以通过setInterval或setTimeout定时调用生成红包的函数。 ```javascript function createRedPacket() { var x = Math.random() * canvas.width; var y = -20; var vx = Math.random() * 6 - 3; var vy = Math.random() * 2 + 2; var size = Math.random() * 10 + 10; var color = '#' + Math.floor(Math.random() * 16777215).toString(16); // 随机生成颜色 var redPacket = new RedPacket(x, y, vx, vy, size, color); redPackets.push(redPacket); } setInterval(createRedPacket, 500); // 每500ms生成一个红包 ``` 6. 实现红包的点击事件，当用户点击红包时，可以实现红包爆炸效果，并显示红包金额或祝福语。 ```javascript function explodeRedPacket(redPacket) { var particles = []; // 存储爆炸粒子的数组 for (var i = 0; i < 20; i++) { var particle = { x: redPacket.x, y: redPacket.y, vx: Math.random() * 6 - 3, vy: Math.random() * 6 - 3, size: Math.random() * 3 + 1, color: redPacket.color }; particles.push(particle); } for (var i = 0; i < particles.length; i++) { drawRedPacket(particles[i]); } } canvas.addEventListener('click', function(event) { var x = event.clientX; var y = event.clientY; for (var i = 0; i < redPackets.length; i++) { var redPacket = redPackets[i]; if (x > redPacket.x - redPacket.size && x < redPacket.x + redPacket.size && y > redPacket.y - redPacket.size && y < redPacket.y + redPacket.size) { explodeRedPacket(redPacket); redPackets.splice(i, 1); break; } } }); ``` 上述就是Canvas红包雨的开发流程，通过Canvas技术和JavaScript实现红包的下落、动画、自动生成和点击事件等效果，可以增加网站的趣味性和用户互动性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值