专栏首页逸鹏说道06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(上)

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),作者:毒逆天

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    矩 阵 变 化 其实像 translate(移动),scale(缩放),rotate(旋转)都是特殊的矩阵变换 transform(m11,m12,m21,m2...

    逸鹏
  • C# 温故而知新:Stream篇(五)下

    对于重写的方法这里不再重复说明,大家可以参考我写的第一篇 以下是memoryStream独有的方法 virtual byte[] GetBuffer() 这个方...

    逸鹏
  • 调取百度地图接口,实现取自己的实时位置,然后可以在百度地图上添加信息标注

    前几天接了一个小项目,就是有关百度地图的,和我的上一篇不一样,上一篇是复制人家的源代码是把东西写死了的,这次的比较有难度,要调取他的接口,用js来实现。 下面我...

    逸鹏
  • 微信小程序开发实战(17):用画布画一张笑脸

    小程序的画布允许绘制基础的图形,如直线、圆等。画布需要使用<canvas>标签,例如,下面的布局代码使用了<canvas>标签定义了一个300*200的画布。

    蒙娜丽宁
  • HTML5之Canvas

    document.createElement("canvas").getContext("2d");

    疯狂的技术宅
  • canvas 实现自定义钟表

    参考博客:https://www.cnblogs.com/liugang-vip/p/3557983.html

    acoolgiser
  • HTML5动态时钟

    felix
  • canvas荧光表源码分享

    Youngxj
  • Canvas绘图——2d表

    初学JavaScript,用Canvas画一个表。主要用到昨天学的间歇调用(setInterval)。 方法和属性介绍 context.beginPath()、...

    刘开心_1266679
  • Canvas 基本绘制(下)

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

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券