html 5 canvas画布整理
1. 创建canvas画布
<canvas id="myCanvas" width="800" height="800" ></canvas>
注意:(1)width、height,这两个属性定义了canvas元素宽和高,从而相应的定义了2D渲染上下文的尺寸。
(2)2D渲染上下文的尺寸默认值:宽300像素、高150像素。
2. 坐标
左上角为原点(0,0)
右移:x坐标增加
下移:y坐标增加
3. 2D渲染上下文(真正绘制图形的地方)
<script type=
"text/javascript"
>
var
canvas = document.getElementById(
'myCanvas'
);
// 获取canvas的ID
var
context =canvas.getContext(
"2d"
);
</script>
第二部分:矩形
1.绘制矩形
方法:context.fillRect(x,y,width,height);
2.绘制描边矩形
方法:strokeRect(x,y,width,height)
实例:
<script>
function
draw1(id){
var
canvas = document.getElementById(id);
var
context =canvas.getContext(
"2d"
);
context.fillRect(0,0,100,100);
// 绘制一个矩形,默认颜色为黑色
context.strokeRect(120, 0, 100, 100);
// 绘制描边矩形
}draw1(
'myCanvas'
);
</script>
第三部分:线条
线条(路径)绘制步骤:
1)beginPath() 准备
2)moveTo() 绘制路径的原点坐标(x,y)
3) lineTo() 设置线条的终点坐标(x,y)
4) closePath() 完成路径的绘制
5)stroke() 绘制轮廓,显示路径
实例:
<script>
function
draw1(id){
var
canvas = document.getElementById(id);
var
context =canvas.getContext(
"2d"
);
context.beginPath();
context.moveTo(40,40);
context.lineTo(140,40);
context.closePath();
context.stroke();
}draw1(
'myCanvas'
);
</script>
第四部分:圆形
canvas 通过绘制圆弧并将其首尾相连,达到绘制圆形的目的。
创建圆弧的方法:context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
对应参数:
1)圆弧原点的(x,y)坐标值,也就是例子中的圆心
2)圆弧半径
3)开始角度
4)结束角度
5)布尔值(顺时针false,逆时针true)
注意: canvas中的圆是以弧度而不是角度为单位的。
360度(一个完整的圆)是2π(PI的2倍)弧度
实例:
<script type=
"text/javascript"
>
function
draw1(id){
var
canvas = document.getElementById(id);
var
context =canvas.getContext(
"2d"
);
context.beginPath();
context.arc(230,90,50,0,Math.PI*2,
false
);
// 绘制圆形
context.closePath();
context.fill();
// 填充路径
}draw1(
'myCanvas'
);
</script>
第五部分:样式
1. fillStyle :给矩形填充颜色
2. strokeStyle:给描边和线条添加颜色
3. lineWidth:修改线宽(线宽默认为1),这个属性也会影响图形
通过设置2D渲染上下文的fillStyle属性,就能够修改形状和路径的填充颜色,如下,绘制一个红色的正方形
<script type=
"text/javascript"
>
function
draw1(id){
var
canvas = document.getElementById(id);
var
context =canvas.getContext(
"2d"
);
context.fillStyle =
"red"
;
// 给图形填充红色
context.fillRect(0,0,50,50);
// 一个红色的正方形
context.fillRect(70,70,80,80);
// 又一个红色正方形
context.fillStyle =
"blue"
;
// 给图形填充蓝色
context.fillRect(70,70,80,80);
// 一个蓝色正方形
context.strokeStyle =
"yellow"
;
// 给图形填充黄色描边
context.strokeRect(170,170,100,100);
// 一个黄色描边的正方形
context.strokeStyle =
"blue"
;
// 绘制蓝色线条
context.beginPath();
// 绘制线条开始
context.moveTo(290,290);
context.lineTo(350,350);
context.closePath();
context.stroke();
// 绘制线条结束
context.lineWidth = 5;
// 加粗线条
context.strokeStyle =
"blue"
;
// 绘制蓝色线条
context.beginPath();
context.moveTo(320,340);
context.lineTo(370,390);
context.closePath();
context.stroke();
// 加粗的线条绘制完成
context.strokeRect(380,380,50,50)
// 受影响的图形,描边已加粗
}draw1(
'myCanvas'
);
</script>
第六部分:绘制文本
canvas绘制文本:
(1) canvas中的文本以图片形式绘制,不可用普通文字一样用鼠标指针选取
(2) 文字绘制后不可编辑,除非先擦除文字,重新绘制
注:通常是使用html来处理文本,使用canvas来处理像素和图形
1.绘制文本:fillText
参数:
准备绘制的文本,文本原点(左下角)的(x,y)坐标值
默认:10px sans-serif
2.修改文字属性:font
3.描边文本:strokeText
<script type=
"text/javascript"
>
function
draw1(id){
var
canvas = document.getElementById(id);
var
context =canvas.getContext(
"2d"
);
var
text =
"hello world!"
;
context.font=
"30px serif"
// 把文本大小设置为30px
context.fillText(text,40,40);
// 绘制文本
context.strokeText(text,40,80);
// 描边文笔塔你
}draw1(
'myCanvas'
);
</script>
html 5 canvas画布整理的更多相关文章
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础(Canvas 画布)
1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...
- 关于使用Css设置Canvas画布大小的问题
问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 自学HTML5第四节(canvas画布详解)
canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...
- “canvas画布仿window系统自带画图软件"项目的思考
"canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...
- 更新——Canvas画布动画效果之实现倒计时
Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...
- Canvas 画布组件(官网翻译)
Canvas画布 The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object w ...
- CANVAS画布与SVG的区别
CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...
随机推荐
- 编译器--__attribute__ ((packed))
1. __attribute__ ((packed)) 的作用就是告诉编译器取消结构在编译过程中的优化对齐,按照实际占用字节数进行对齐,是GCC特有的语法.这个功能是跟操作系统没关系,跟编译器有关,g ...
- C# 动态调用DLL库
最近经常用到C#动态调用类库,简单的做下记录方便以后查询. 使用下面的几行代码就可以简单实现DLL类库的调用了 using System.Reflection; // 引入该命名空间 // 获取roc ...
- 惊闻Java要收费之后
今天看到朋友圈里的文章 <Oracle终于要向Java的非付费用户开枪了>,被这个标题吓了一跳,还以为Java要全面收费了.又被标题党骗了. 但是仔细想想,以Oracle公司的尿性,没准哪 ...
- C#水晶报表,窗体不显示,闪退
一.问题说明 由于VS2008以后水晶报表不在集成,要用的话需要单独下载. 这里注意如果是用在C#窗体程序里的话一定要下载exe文件,安装msi文件的话VS工具栏里找不到水晶报表控件的.如果你的是64 ...
- 多个supplemental logging的说明与删除
有时候我们做ogg的时候,查看info trandata schema.table 无法查看到对应的supplement log信息, 但是我们查看table script的时候可以看到supplem ...
- 从零起步搭建Wordpress个人博客——Windows 平台篇(上)
本文以 Windows Server R2 64bit 标准版 为基础,其他windows版本可能会略有不同. 参考资料: https://codex.wordpress.org/Installing ...
- Centos7中安装Mysql及配置
CentOS 7 安装 MySQL 首先检查 MySQL 是否已安装 yum list installed | grep mysql 如果有的话 就全部卸载 yum -y remove +数据库名称 ...
- mysql的查询、子查询及连接查询
>>>>>>>>>> 一.mysql查询的五种子句 where(条件查询).having(筛选).group by(分组). ...
- Keras官方Example里Mnist-cnn的调试运行
问题:老板让测试运行Keras官网里的Mnist-cnn.py,结果从下载数据就是一路坑-- 当前环境:Ubuntu12.04.python2.7.Keras 1.1.1(不知道这个版本号对不对,在启 ...
- Angular内置指令(二)
目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...