06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(上)

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html

点击原文,查看笔记大图

05.HTML5 画布

初始画布

canvas默认是宽300px,高150px;

绘制步骤

1.定义一个id

<canvas id="canvasOne" width="300" height="300"></canvas>

2.获取canvas对象

var canvasObj = document.getElementById('canvasOne');

3.通过getContext获取上下文

var context = canvasObj.getContext("2d");

目前支持2d绘图

4.通过javascript进行绘制

context.fillStyle = "red";

设置样式为红色

context.fillRect(125, 125, 50, 50);

在x坐标为125,y坐标为125的地方绘制一个长为50宽为50的正方形

绘制案例

常见几何

绘制直线

绘制300*300画布的对角线

beginPath()

开始绘制

moveTo(x,y)

直线起点

lineTo(x,y)

直线终点

stroke()

绘制直线

<canvas id="canvasOne" width="300" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext("2d");

//context.strokeStyle = "#ff6a00";

context.beginPath();

context.moveTo(0, 0);

context.lineTo(300, 300);

context.stroke();

context.moveTo(0, 300);

context.lineTo(300, 0);

context.stroke();

</script>

绘制矩形

在画布中间绘制一个100*50的矩形

绘制

strokeStyle

strokeRect(x,y,w,h)

填充

fillStyle

fillRect(x,y,w,h)

<canvas id="canvasOne" width="300" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext("2d");

context.strokeStyle = 'rgb(100%,0%,100%)';

context.strokeRect(100, 125, 100, 50);

</script>

绘制圆形

绘制300*300画布的内切圆

beginPath()

开始绘制路径

arc(x, y, r, s, e, b)

x,y 坐标这次是代表圆心

r 代表半径

s 代表开始弧度

e 代表结束弧度

b 代表是否顺时针方向画图

默认逆时针

closePath()

结束绘制路径

扩充案例

fill()

填充

<canvas id="canvasOne" width="300" height="300"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext("2d");

context.fillStyle = 'rgb(0,50,0)';

context.beginPath();//开始绘制路径

context.arc(150, 150, 150, 0, Math.PI * 2,true);//注意:x,y 坐标这次是代表圆心

context.closePath();//结束绘制路径

context.fill();//填充

</script>

绘制弧线

context.closePath();

路径不闭合的时候会自动画一条直线(代码看注释)

<canvas id="canvasOne" width="300" height="300"></canvas>

<canvas id="canvasTwo" width="300" height="300"></canvas>

<canvas id="canvasThree" width="300" height="300"></canvas>

<script type="text/javascript">

//第一个画布

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext("2d");

for (var i = 0; i <= 15; i++) {

context.fillStyle = 'rgb(0,50,0)';

context.beginPath();//开始绘制路径

context.arc(0, 150, i * 10, 0, Math.PI * 1.5);//注意:x,y 坐标这次是代表圆心

//context.closePath();//结束绘制路径

context.stroke();//填充

}

//第二个画布

var canvasObj2 = document.getElementById('canvasTwo');

var context2 = canvasObj2.getContext("2d");

for (var i = 0; i <= 30; i++) {

context2.fillStyle = 'rgb(0,0,50)';

context2.beginPath();//开始绘制路径

context2.arc(0, 0, i * 10, 0, Math.PI * 1.5);//注意:x,y 坐标这次是代表圆心

//context2.closePath();//结束绘制路径

context2.stroke();//填充

}

//第三个画布-搞怪来袭

var canvasObj3 = document.getElementById('canvasThree');

var context3 = canvasObj3.getContext("2d");

for (var i = 0; i <= 30; i++) {

context3.fillStyle = 'rgb(0,0,50)';

context3.beginPath();//开始绘制路径

context3.arc(0, 150, i * 10, 1, 3);//注意:x,y 坐标这次是代表圆心

context3.closePath();//结束绘制路径,路径不闭合的情况下会自动补上一个直线,所以就搞怪了

context3.stroke();//填充

}

</script>

绘制三角形

绘制三角形

<canvas id="myCanvas" width="200" height="200"></canvas>

<script type="text/javascript">

var c = document.getElementById("myCanvas");

var context = c.getContext("2d");

context.strokeStyle = "red";

context.beginPath();

context.moveTo(25, 25);

context.lineTo(150, 25);

context.lineTo(25, 150);

context.closePath();

context.stroke();

</script>

常用技能

透 明 度

rgba(r,g,b,a)

a代表透明度,取值范围在 0~1

清 除 画 布

context.clearRect(x,y,w,h)

(圆形橡皮擦)

案例

保存与恢复状态

状态

指当前画面所有样式,变形,裁切的快照

举个例子:你先用红色样式画一个矩形,然后保存状态,然后再用蓝色样式画一个矩形。

恢复状态画个矩形看看,发现====> 矩形是红色的====>说明====>状态保存下来了。

图例

保存

context.save();

恢复

context.restore()

移动坐标空间

context.translate(60,50);

x轴方向右移60,y轴方向下移50

for (var i = 1; i < 10; i++) {

context.save();//保存一下状态

context.translate(60 * i, 50);//x轴方向右移60*i,y轴方向下移50

//画伞的顶部

context.fillStyle = 'rgb(' + i * 25 + ',' + 0 + ',' + 255 + ')';

context.beginPath();

context.arc(0, 0, 30, 0, Math.PI, true);//在起点位置顺时针画一个半圆

context.closePath();

context.fill();

//画伞的底部

context.strokeStyle = "red";

context.strokeRect(-0.2, 0, 0.4, 30);

//画伞的根部

context.beginPath();

context.arc(-5, 30, 5, 0, Math.PI);//圆心左移五个单位,圆的右边点就在根部了

context.stroke();

context.restore();//恢复一下状态(不然每次都移动坐标原点,就变成天女散花了)

}

for (var i = 1; i < 10; i++) {

//x轴方向右移60+i,y轴方向下移50

context.translate(60 + i, 50);

//画伞的顶部

context.fillStyle = 'rgb(' + 255 + ',' + i * 25 + ',' + 0 + ')';

context.beginPath();

context.arc(0, 0, 30, 0, Math.PI, true);//在起点位置顺时针画一个半圆

context.closePath();

context.fill();

//画伞的底部

context.strokeStyle = "red";

context.strokeRect(-0.2, 0, 0.4, 30);

//画伞的根部

context.beginPath();

context.arc(-5, 30, 5, 0, Math.PI);//圆心左移五个单位,圆的右边点就在根部了

context.stroke();

}

旋转坐标空间

rotate(angle)

angle 代表旋转角度

弧度为单位

在坐标原点顺时针方向旋转

<canvas id="canvasOne" width="600" height="600"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext('2d');

context.translate(300, 300);

//画伞

function drawUmbrella(i) {

//画伞的顶部

context.fillStyle = 'rgb(' + i * 25 + ',' + 0 + ',' + 255 + ')';

context.beginPath();

context.arc(0, 0, 30, 0, Math.PI, true);//在起点位置顺时针画一个半圆

context.closePath();

context.fill();

//画伞的底部

context.strokeStyle = "red";

context.strokeRect(-0.2, 0, 0.4, 30);

//画伞的根部

context.beginPath();

context.arc(-5, 30, 5, 0, Math.PI);//圆心左移五个单位,圆的右边点就在根部了

context.stroke();

}

function draw() {

for (var i = 1; i <= 10; i++) {

context.save();//保存一下状态

context.rotate(Math.PI * (0.2 * i));//2Pi 弧度是一个圆

context.translate(0, 150);//越小越紧凑

drawUmbrella(i);//画伞(画伞代码未变)

context.restore();//恢复一下状态

}

}

window.onload = function () {

draw();

}

</script>

缩 放 图 形

context.scale(1.1, 1.1)

扩大1.1倍

rgba(r,g,b,a)

a代表透明度,取值范围在 0~1

<canvas id="canvasOne" width="600" height="600"></canvas>

<script type="text/javascript">

var canvasObj = document.getElementById('canvasOne');

var context = canvasObj.getContext('2d');

context.translate(300, 300);

for (var i = 1; i < 50; i++) {

context.rotate(Math.PI / 9);//旋转

context.scale(1.1, 1.1);//扩大1.1倍

context.translate(0.5, 0.5);//平移

context.fillStyle = 'rgba(' + i * 5 + ',' + 0 + ',' + 200 + ',' + 0.5 + ')';

context.beginPath();

context.arc(0, 0, 1, 0, Math.PI * 2, true);

context.closePath();

context.fill();

}

</script>

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2016-01-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏C/C++基础

CSS中常见的长度单位

注意: (1)字体的尺寸指的是什么? 字体大小是指字在屏幕或印刷介质上表现出来的大小,将每个字看作方块,按方块的对角线长度计算大小。

16920
来自专栏林德熙的博客

WPF 等距布局

实际做的效果很简单,因为在开发我容易就用到了等距的控件。等距控件就是在指定的宽度下,平均把控件放在水平的地方,这样相等于 StackPanel 的水平,但是没有...

11610
来自专栏葡萄城控件技术团队

三天学会HTML5——SVG和Canvas的使用

在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容。 第2...

51190
来自专栏一“技”之长

Android开发之LinearLayout布局详解

        LinaerLayout又被称为线性布局,是Android界面开发中常用的一种容器视图控件。可以使用XML布局文件配置和代码动态创建两种方式来使...

11230
来自专栏雪胖纸的玩蛇日常

canvas的api小结

26160
来自专栏葬爱家族

H5和微信小游戏 Canvas API 整理前言

这段时间闲下来,系统学习了微信小程序和微信小游戏,发现还是挺有意思的。现在微信小游戏的开发都离不开游戏引擎,用原生小游戏开发工具开发的很少很少。但是毕竟我不是专...

87340
来自专栏非典型技术宅

OC绘制基本图形1. UIKit中封装了一些最常用的绘图方法2. 贝塞尔路径常用方法列表(BezierPath)3. 保存屏幕截图,并存储至相册

14340
来自专栏猛牛哥的博客

HTMLayout 界面贴图技术

32040
来自专栏Spring相关

使用canvas绘制渐变色矩形和使用按键控制人物移动

13330
来自专栏HTML5学堂

Canvas 基本绘制(下)

HTML5学堂:在前一篇文章《Canvas 基本绘制(上)》当中,我们为大家介绍了Canvas的基本知识——什么是Canvas、如何使用Canvas进行图像的绘...

37560

扫码关注云+社区

领取腾讯云代金券