Html5画布_动力节点Java学院整理


Posted in HTML / CSS onJuly 13, 2017

1,Canvas的定义

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

默认<canvas>画布在页面上会显示一块空白、无边框的矩形。为了让其显示轮廓,通过定义样式规则给其添加一个虚线边框:

canvas {
    border: 1px dashed black;
}

2,获取Canvas的上下文对象

要完成绘图任务,首先我们要拿到<canvas>对象,接着取得其二维绘图上下文。

下面样例演示在页面加载完毕时获取绘图上下文:

<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
 
        //这里写绘图代码
    }
</script>

3,画直线

(1)下面绘制一条起点是(50,50),终点是(150,150)的直线线条

context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();

Html5画布_动力节点Java学院整理

(2)使用lineWidth、strokeStyle属性分别设置线条的宽度和颜色

//线条宽度
context.lineWidth = 10;
 
//线条颜色(支持颜色编码与rgb()函数)
context.strokeStyle = "#cd2828";
context.strokeStyle = "rgb(205,40,40)";
 
context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();

Html5画布_动力节点Java学院整理

(3)使用 lineCap 属性设置线条两端的形状(线头类型):

  1. butt:方头(默认值)
  2. round:圆头
  3. square:加长方头(效果与butt类似,但会在线条的两头各增加一半线宽的长度)
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//线条宽度
context.lineWidth = 10;
//线条颜色
context.strokeStyle = "#cd2828";
 
//第一条直线,默认方头
context.moveTo(50, 50);
context.lineTo(250, 50);
context.stroke();
 
//第二条直线,使用圆头
context.beginPath();
context.moveTo(50, 100);
context.lineTo(250, 100);
context.lineCap = "round";
context.stroke();
 
//第三条直线,使用加长方头
context.beginPath();
context.moveTo(50, 150);
context.lineTo(250, 150);
context.lineCap = "square";
context.stroke();

Html5画布_动力节点Java学院整理

注:绘图上下文的beginPath()方法

上面样例可以看到每次开始新线段的绘制时,都要调用 beginPath() 方法。

如果没有这一步操作,那么每次调用 stroke() 都会把画布上原有的线段再重新绘制一边。特别像上面的例子,绘制新线段时都要修改上下文属性,如果不调用 beginPath() 方法,那么原有的直线也会使用新的样式绘制。

HTML / CSS 相关文章推荐
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 #HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 #HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 #HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 #HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 #HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 #HTML / CSS
HTML5等待加载动画效果
Jul 27 #HTML / CSS
You might like
使用PHP维护文件系统
2006/10/09 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
Express.JS使用详解
2014/07/17 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
python调用摄像头的示例代码
2020/09/28 Python
行政人员岗位职责
2013/12/08 职场文书
幼儿教师培训感言
2014/03/08 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
MySQL的存储过程和相关函数
2022/04/26 MySQL