文档章节

HTML5之帆布(canvas)(四)

博为峰教研组
 博为峰教研组
发布于 2016/12/12 15:07
字数 373
阅读 2
收藏 0

绘制矩形

· 指定正方形的边长

· 指定正方形的位置点¯x和ÿ

· 设置正方形的属性

· 绘制正方形

//画正方形

function drawSquare(canvas,context) {

    var w = Math.floor(Math.random() * 40);

 

    var x = Math.floor(Math.random() * canvas.width);

    var y = Math.floor(Math.random() * canvas.height);

 

    context.fillStyle = "lightblue";

    context.fillRect(x,y,w,w);

}绘制线

· beginPath方法方法告诉画布开始一个新路径

· 的moveTo方法把画笔移到画布上的指定点

· 了lineTo方法描绘路径,从画笔的当前位置描绘到画布上的另一个点

· 调用closePath方法将路径的起始点连接到当前路径的最后一个点

//绘制线

function drawLine(canvas, context) {

    context.beginPath();

    context.moveTo(100, 150);

    context.lineTo(250, 75);

    context.lineTo(125, 30);

    context.closePath();

    context.lineWidth = 5;

    context.stroke();

    context.fillStyle = "red";

    context.fill();

}

绘制圆形

· 创建一个路径

· 填充弧方法参数

· 设置圆的属性

· 填充圆

先来分析弧方法

context.arc(x,y,radius,startAngle,endAngle.direction);

· 点¯x和Y:确定圆心在画布上的位置

· 半径:圆的半径

· 由startAngle:圆弧的起始角,确定路径的起点,可以为负值(表示按负方向度量),单位为弧度

· endAngle:圆弧的终止角,确定路径的终点,可以为负值(表示按负方向度量),单位为弧度

· 方向:真表示逆时针画弧,虚假表示顺时针画弧

//画圆形

function drawCircle(canvas,context) {

 

    var radius = Math.floor(Math.random() * 40);

 

    var x = Math.floor(Math.random() * canvas.width);

    var y = Math.floor(Math.random() * canvas.height);

 

    context.beginPath();

    context.arc(x,y,radius,0,degreeToRadians(360),true);

    context.fillStyle = "red";

    context.fill();

}

 

//度数转弧度

function degreeToRadians(degree) {

    return (degree * Math.PI) / 180;

}

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
再来 10 个新鲜的 HTML5 教程

HTML5 火吗?看看 oschina 三天两头的 xx 个 xxx 就知道了。本文为你推荐最新的 10 个 HTML5 相关的教程,或许能启发你项目中的思路。 1. HTML5 canvas – Creating own Paint program Canva...

红薯
2011/11/15
3.9K
4
30 个必须看的 HTML 5 教程

HTML5 和 CSS3 拓展了Web 设计的可能性。有很多大量的设计师和开发者在web设计中开始学习并使用HTML 5。 这次我们推荐的30个有用的HTML 5 教程,相信会帮助开发者提升技能。列表如下: Maki...

小卒过河
2011/07/29
15.9K
7
10 在线工具用来简化 HTML5 编码

HTML5 肯定是会彻底改变我们创建的网站和Web应用程序。在这篇文章中,编制了10个非常强大的工具,以简化和增强你的HTML5的编码。 Initializr Initializr会为你生成一个干净的可定制的模板,基...

红薯
2011/08/16
3.1K
3
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
推荐10款非常优秀的HTML5开发工具

HTML5发展如火如荼,随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟,未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助...

长平狐
2012/10/09
156
0

没有更多内容

加载失败,请刷新页面

加载更多

CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
1
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
2
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
3
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
2
0
深入理解JVM—JVM内存模型

深入理解JVM—JVM内存模型 我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存...

onedotdot
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部