Canvas 学习笔记1
#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言 相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人看了之后,其实发现作用非常小,因为似乎这些东西什么也做不了,本着学习提升自己,造福大家,我打算把我学习`Canvas`的历程记录在这里。首先推荐大家先看看阮一峰大大写的这个[Canvas API](http://javascript.ruanyifeng.com/htmlapi/canvas.html),我感觉挺不错的,对于想了解`Canvas`的人来说,这些已经足够了。深入的学习,咱慢慢再来。###坑爹集锦 这里汇集了一些我所碰到的问题或者自己的理解,标题纯粹的只是为了吐槽,有说的不对的地方,望各位见谅,并予以修正。1. 关于之前发的链接`Canvas API`的`3.1`部分 ```javascript var image = new Image(); image.onload = function() { if (image.width != canvas.width)canvas.width = image.width;if (image.height != canvas.height)canvas.height = image.height;ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(image, 0, 0); } image.src = "image.png"; ``` 这部分,这里的`canvas`指的是画布大小*`用小写的canvas表示画布`*,并不是`Canvas`这个`DOM`对象的大小*`用大写的表示DOM对象`*。这里关系到3个概念。- `DOM`元素`Canvas`的大小- `canvas`画布大小- `image`图片大小那再来理解下第四行`canvas.width = image.width;`这里是让画布的高度等于图片的高度,实际上`DOM`元素`Canvas`的大小是不发生任何改变的,改变的只是画布的大小。今天新买的书到了《HTML Canvas核心技术》,网上一致好评的书。里面`1.1.1`就有提到了,画布大小还有元素大小。>使用CSS来设置canvas元素的大小,与直接设置属性相比,其差别是基于这样一个事实的:canvas元素实际上有两套尺寸。一个是元素本身的大小,还有一个是元素绘图表面(drawing surface)的大小。>**警告:浏览器可能会自动缩放Canvas**通过width与height属性而非修改CSS来修改canvas元素的大小,这是个好办法。如果使用CSS来修改元素的大小,同时有没有制定canvas元素的width与height属性,那么,当元素大小与canvas的绘图表面大小不相符时,浏览器会缩放后者,使之符合前者的大小。这样的话,很可能会导致奇怪的、无用的效果。``` ----------基友说 逢 站 坑 撸 必 不 过 哭 ---------- 2014年7月17日 17:03:00 ```
转载于:https://www.cnblogs.com/nunn/p/3851534.html
Canvas 学习笔记1相关推荐
- canvas学习笔记
canvas学习笔记 canvas API中文网 - Canvas API中文文档首页地图 使用canvas来绘制图形 - Web API 接口参考 | MDN 什么是Canvas? Canvas是H ...
- Canvas学习笔记之画线
Canvas学习笔记之画线 步骤 1.使用getElementById()获取canvas元素. 2.获取canvas的绘制环境getContext(). 3.进行绘制画笔的粗细和颜色定义,分别是li ...
- canvas学习笔记(下篇) -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例(星空/时钟/小球)...
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- Canvas学习笔记 Canvas的基础知识点
文章目录 前言 一.导航 初始化 属性与方法 小demo 二.绘制功能 2.1.绘制矩形 2.1.1.非面向思想实现动画 2.1.2.面向对象思维实现动画 2.2.绘制路径 2.3.绘制圆弧(动态圆形 ...
- HTML5中canvas实现拼图游戏,HTML5 Canvas学习笔记(6)拼图游戏(数字版)
今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑. 效果图: 点击这里试玩 http://www.108js.com/article/canvas/6/play.html 欢迎访问博主的网 ...
- Android Bitmap和Canvas学习笔记
位图是我们开发中最常用的资源,毕竟一个漂亮的界面对用户是最有吸引力的. 1. 从资源中获取位图 可以使用BitmapDrawable或者BitmapFactory来获取资源中的位图. 当然,首先需要获 ...
- html坐标绘制路径,canvas学习笔记之绘制简单路径
1 线段(直线路径) 绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画 ...
- canvas学习笔记-贝塞尔曲线
3.4 贝塞尔曲线 canvas提供了两个绘制贝塞尔曲线api: ctx.quadraticCurveTo(cpx, cpy, x, y); 二次贝塞尔曲线,(cpx, cpy)控制点 (x, y)终 ...
- Canvas学习笔记及像素操作——实现马赛克
绘制文本 window.onload = function () {//获取画布var canvas = document.querySelector('#test')//检查支持性if (canva ...
最新文章
- eclipse adt如何切换到设计界面_APP界面设计模板|引导页该如何设计?
- 用Python分析了十年电影票房,原来我错过了这么多好电影!
- ADT 怎么删除logcat过滤规则
- 计算机视觉已超越人类眼睛?腾讯优图与《科学》杂志全面解读
- SQL Azure(十) SQL Azure Data Sync数据同步功能(上)
- 单片机模块学习之键盘
- pycharm更改模板_pycharm怎样给文件编辑统一的模板?
- Select-or-Die:灵活的 jQuery 下拉列表插件
- mysql ha 安装 配置文件_Linux下环境安装配置Rose HA全攻略(图)
- 217.存在重复元素
- 【自动化测试】在做自动化测试之前你需要知道的
- Mysql漏洞修复方法思路及注意事项
- Ubuntu14.04安装VMwareTools
- 6、ES6的let和const
- HTML的标签与属性/title标签/meta标签/
- 微软对开发者献真爱,全面支持开源,加速研发云升级
- 像素与照片尺寸、分辨率之间的关系
- 中级软件设计师简要知识点(5):网络与多媒体基础知识
- matlab mosa算法,尔雅尔雅2020年科学计算与MATLAB语言答案大全
- 线性稳压器与开关稳压器的对比分析
热门文章
- C语言位于30到100之间的一个奇数,《帮你度过C语言新手阶段》系列之三
- 【Node.js】http-server 实现目录浏览服务
- 【linux】查看内存使用情况
- react追加html元素,React给添加元素增加样式
- 5.0安装没有costom mysql_Zabbix5.0监控mysql配置
- junit 内部类测试_Springboot 使用单元测试
- python数学函数_「分享」关于Python整理的常用数学函数整理
- IBM p5服务器上的虚拟 分享,IBMp5服务器系统虚拟技术详解
- 从零开始搭建spring-cloud(5) ----config
- 弃用官方网站!Python 将所有 Bug 迁移到 GitHub 中