一.canvas的编程思想

canvas的像素化：我们使用canvas绘制了一个图形，一旦绘制成功，图形就会被像素化。

canvas没有能力再次修改画布上已经存在的内容，这就是canvas比较轻的原因。

flash重的原因：它可以通过对应的API得到画布上已经存在的内容再次绘制。

canvas编程思想：我们想要图形移动，必须按照清屏-更新-渲染的逻辑进行编程，总之就是重新再画一次。

动画的过程：静态页面的连续播放。

我们把每一次绘制的静态画面叫做 “一帧”,时间【定时器】的间隔是帧的间隔。

二.源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>canvas的编程思想</title>
</head>
<body><canvas id="myCanvas" width="600" height="600"></canvas>
</body>
</html>
<script>//获取画布var canvas=document.getElementById("myCanvas");//获取上下文var ctx = canvas.getContext("2d");//设置颜色ctx.fillStyle = "blue";//设置信号量var left =100;//动画过程setInterval(function(){  //定时器方法//1.清除画布: 0,0是清除的位置; 600,700是清除的宽度和高度ctx.clearRect(0,0,600,700);//2.更新信号量left++;//3.渲染ctx.fillRect(left,100,100,100);},1);
</script>

篇章

上一篇：canvas教程1-canvas的基本使用

下一篇：canvas教程3-用面向对象思维来实现动画

canvas教程2-canvas的编程思想相关推荐

canvas mdn_MDN文档 canvas教程笔记
MDN Canvas教程 API CanvasRenderingContext2D即canvas.getContext('2d')返回的对象类型,几乎所有作图操作基于这个"上下文对象&q ...
canvas教程1-canvas的基本使用
文章目录一.canvas的简介二.源码三.效果图四.知识点总结篇章一.canvas的简介一直以来,web上的动画都是flash实现的,例如,广告.游戏等. flash是有缺点的,例如我们 ...
canvas教程大纲
文章目录 canvas教程1-canvas的基本使用 canvas教程2-canvas的编程思想 canvas教程3-用面向对象思维来实现动画 canvas教程4-canvas的绘制功能 canvas ...
html5 canvas详解 pdf,html5 canvas教程 pdf
html5 canvas教程 pdf [2021-02-18 05:30:56] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(&q ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
html5的canvas动画,Canvas HTML5简介 · Canvas动画教程
Ch1 HTML5简介前言今后的一个月内会连载详细的Canvas教程,从零基础开始,到Canvas API,再到基本动画与高级动画的实现,还会介绍视音频的处理.移动应用,最后如果有时间会扩展说一说 ...
c/c++教程 - 2.4.3 this指针作用，链式编程思想，空指针访问成员函数，const修饰成员函数，常函数，常对象
目录 4.3 C++对象模型和this指针 4.3.1 成员变量和成员函数分开存储 4.3.2 this指针概念(非常重要) 4.3.3 空指针访问成员函数 4.3.4 const修饰成员函数相关教 ...
canvas教程11-渐变
文章目录一.渐变 1.线型渐变 2.径向渐变二.源码 1.线型渐变 2.径向渐变三.效果图 1.线型渐变 2.径向渐变篇章一.渐变渐变有两种方式,一种是线型渐变,一种是径向渐变. 1.线型 ...
canvas教程17-合成
文章目录一.合成二.知识点总结三.图形解释 1.默认(source-over) 2.source-in(相交的部分) 3.source-out 4.source-atop 5.destinati ...

canvas教程2-canvas的编程思想

文章目录

一.canvas的编程思想

二.源码

篇章

canvas教程2-canvas的编程思想相关推荐

最新文章

热门文章