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绘制天猫logo实现代码
Nov 06 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 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设计模式之命令模式的深入解析
2013/06/13 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
基于django传递数据到后端的例子
2019/08/16 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
什么是数据抽象
2016/11/26 面试题
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
大学生操行评语大全
2014/12/31 职场文书
贷款工资证明范本
2015/06/12 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python