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样式中的 !important * _ 符号
Mar 09 HTML / CSS
CSS3美化表单控件全集
Jun 29 HTML / CSS
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
CSS3制作日历实现代码
Jan 21 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 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/21 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python比较两个图片相似度的方法
2015/03/13 Python
Python序列操作之进阶篇
2016/12/08 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
化工专业大学生职业生涯规划书
2014/01/14 职场文书
十八届三中全会感言
2014/03/10 职场文书
小学六年级学生评语
2014/04/22 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
建筑横幅标语
2014/10/09 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书