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 相关文章推荐
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 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.ini中date.timezone设置分析
2011/07/29 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
Jquery 插件开发笔记整理
2011/01/17 Javascript
javascript 闭包
2011/09/15 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Puppeteer使用示例详解
2019/06/20 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
python2和python3哪个使用率高
2020/06/23 Python
python中K-means算法基础知识点
2021/01/25 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
护士毕业生自我鉴定
2014/02/08 职场文书
小学课外活动总结
2014/07/09 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
雷峰塔导游词
2015/02/09 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
中学校园广播稿
2015/08/18 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB