canvas ---1
- canvas :就是html5中提供的一个标签,只是用来展示绘图的内容
- canvas 标签的默认宽高:300*150
- 如果给canvas来设置高度和宽度
- 一般情况就是html的width 和 height属性
- 通过js来设置宽度和高度
- 不管是通过html的属性(width/height) 还是直接通过DOM来设置(width/height ),属性都是在设置canvas画布中的像素点
- 注意:不要通过css样式属性来设置高度和宽度,因为这里的高度和宽度不是在设置像素点的个数,而是在扩大或者缩小每个像素点的大小
- canvas标签IE9及其以上的浏览器才支持
- 使用canvas基本步骤:
- 获取canvasDOM元素
- 获取canvas绘图上下文(一系列工具的集合)
- 从上下文中获取到相应的工具(API 或者方法)
- 系统的画图工具:
- canvas画布:白色的空白区域
- 上下文:白色的空白区域上部工具栏
- 常用的方法:
- .moveTo()----把画笔移动到画布中的某个位置去
- .lineTo() ----在起始点和当前函数提供的坐标之间画一条路径
- .stroke() ----描边,真正的将路径绘制在canvas画布上
- .fill() ---- 填充,填充为一个指定的颜色,如果绘制了一个没有闭合图形,会自动闭合
- .closePath() ---闭合路径
- 闭合路径 与 自己写的连线的区别:
- 闭合路径绘制的两条线衔接处更加平滑
- 自己写的连线,只是让开始位置跟结束的位置放到一起,这两者绘制出来的接合处是有区别的
- .beginPath()----开启路径
- 开启路径,只把原来的路径清空了,但是绘制的样式(状态)还会被继承了
- 如果是开启新路径之后,又设置了样式,那么会把之前的样式覆盖
- 常用的样式:
- strokeStyle 设置描边的颜色
取值:颜色名称 十六进制 rgba - fillStyle 设置填充的颜色
- lineWidth 设置线的宽度 :如果是奇数的线宽,绘制的时候,会制动加1像素,然后最外面的两个像素颜色会变淡
- strokeStyle 设置描边的颜色
- 如何让lineWidth的宽度为1
- (width,height.5)
canvas ---1的更多相关文章
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
- 使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
随机推荐
- ADODB的应用
<?php include_once ('adodb5/adodb.inc.php'); $db = NewADOConnection ('mysql'); $db->Connect(&q ...
- d3可视化实战03:神奇的superformula
需求驱动实现 前文讲过了D3的数据驱动机制,中间所举的例子都很简单.例如那个demo里面,绑定的数据是一个简单的数组,实现的图元也仅仅是一堆用SVG画的circle.但是现实世界中我们往往会遇到复杂的 ...
- 使用__autoload()来管理文件导入
其基本思想是把要使用到的其他资源文件统一使用__autoload()方法来管理,我们在使用的时候只需要引入包含__autoload()方法的文件即可.其对性能的影响是微乎其微的,但是带来的好处是巨大的 ...
- Basefragment的封装使用
1.前言 封装作为面向对象的三大特性之一,在我们平时的coding过程用的那是非常的多的.大多数时候,我们可以根据封装情况评判代码的质量水平. 本文主要讲解的是fragment的封装.大体上,在项目的 ...
- COJ 0024 N皇后问题
N皇后问题 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 在N*N的方格棋盘放置N个皇,使得它们不相互攻击(即任意2个 ...
- BZOJ3433: [Usaco2014 Jan]Recording the Moolympics
3433: [Usaco2014 Jan]Recording the Moolympics Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 55 So ...
- error userinfo error pos 5 友盟分享 网页分享(无新浪微博客户端)
集成友盟分享的时候,其中微博分享,如果没有添加测试账号,就会出现{error userinfo error pos 5}的错误添加测试账号才能分享在测试信息下添加测试账号
- UINavigation push 于 present到另一个页面详解
如果页面中没有导航栏,可以present到这个A页面,在A页面想要跳转到有个有导航栏的页面就需要添加给B页面添加一个UINavigationController 然后present到B页面,代码如下 ...
- 关于git的文件内容冲突解决
虽然以前我很怕git冲突,包括以前的版本控制器SVN上的冲突,但是昨天我决定好好的面对它,不去怕它,下面是我的解决过程... 话说一天的早上,我和同事(称为A)都同步了网络上的代码,然而A在中途提交了 ...
- 使用GCM服务(Google Cloud Messaging)实现Android消息推送
最近在网上查了关于很多Android消息推送的资料,其中主要有四种方法. 1) 使用GCM服务(Google Cloud Messaging) 2) 使用XMPP协议(Openfire + Spark ...