HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程使用html5 canvas 绘制精美的图

作者：佚名字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含html5_canvas,,html5_canvas绘图框架等相关知识,佚名希望在学习及工作中可以帮助到您

HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。

好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。

1、使用Canvas绘制直线：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cancans = can.getContext('2d');
cans.moveTo(20,30);//第一个起点
cans.lineTo(120,90);//第二个点
cans.lineTo(220,60);//第三个点（以第二个点为起点）
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>

这里用到的两个API方法，moveTo和lineTo分别是线段的起点和终点坐标，变量为（X坐标,Y坐标）,strokeStyle、stroke分别路径绘制样式和绘制路径。

2、绘制渐变线条

渐变线条就是颜色有渐变的效果，当然渐变的样式可以遵循路径的方向也可以不遵循路径的方向：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">

您可能想查找下面的文章:

相关文章

2018-12-03html5之使用web存储的具体介绍
2017-08-06HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2017-08-06图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传
2018-12-03超酷创意分段式SVG文字动画特效
2018-12-03详解WebSocket跨域问题解决
2018-12-03有哪些面向手机端且非常优秀的 HTML5 Web App？
2018-12-03html5中设置或返回音频/视频是否默认静音的属性defaultMuted
2018-12-03HTML5 对各个标签的定义与规定：body
2018-12-03怎样使用javascript Date Format方法
2017-08-06html5 button autofocus 属性介绍及应用

文章分类

最近更新的内容