Canvas学习笔记之画线

步骤

1.使用getElementById()获取canvas元素。
2.获取canvas的绘制环境getContext()。
3.进行绘制画笔的粗细和颜色定义，分别是lineWidth和strokeStyle。
4.告诉系统开始绘制beginPath()。
5.制定画笔光标moveTo(x, y)。
6.进行路径绘制lineTo(x, y)。
7.进行绘制图形颜色绘制。

注意事项

1.IE8以下浏览器不支持，可以使用excanvas进行模仿canvas。
2.canvas的画布大小是要在标签中声明中就要定义的，所以，提前定义好width和height。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"></head><body><canvas id="myCanvas" width="200" height="100">您的浏览器不支持HTML5</canvas><script>// var c = document.getElementById('myCanvas');// var ctx = c.getContext('2d');// ctx.lineWidth = 10;// ctx.strokeStyle = '#f00';// ctx.beginPath();// ctx.moveTo(10, 10);// ctx.lineTo(150, 50);// ctx.stroke();// 三种线帽var c = document.getElementById('myCanvas');var ctx = c.getContext('2d');ctx.lineWidth = 10;ctx.strokeStyle = '#f00';//默认笔帽，平直边缘ctx.lineCap = 'butt';ctx.beginPath();ctx.moveTo(10, 10);ctx.lineTo(150, 10);ctx.stroke();//圆头笔帽ctx.lineCap = 'round';ctx.beginPath();ctx.moveTo(10, 40);ctx.lineTo(150, 40);ctx.stroke();//方格笔帽ctx.lineCap = 'square';ctx.beginPath();ctx.moveTo(10, 70);ctx.lineTo(150, 70);ctx.stroke();</script></body>
</html>

效果图

Canvas学习笔记之画线相关推荐

【QT 5 学习笔记-学习绘图相关+画线图形等+绘图事件+基础学习（1）】
[QT 5 学习笔记-学习绘图相关+画线图形等+绘图事件+基础学习(1)] 1.说明 2.实验环境 3.参照学习链接 4.自己的学习与理解 5.学习与实践代码. (1)建立基础工程. (2)加入绘图事 ...
canvas学习笔记
canvas学习笔记 canvas API中文网 - Canvas API中文文档首页地图使用canvas来绘制图形 - Web API 接口参考 | MDN 什么是Canvas? Canvas是H ...
Canvas 学习笔记1
#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人 ...
Python学习笔记六——画小猪佩奇
目录 Python学习笔记六--画小猪佩奇画布画笔属性设置操纵命令运动命令画笔控制命令全局控制命令其他命令 Python学习笔记六--画小猪佩奇使用Python的turtle库可以绘 ...
Canvas学习笔记 Canvas的基础知识点
文章目录前言一.导航初始化属性与方法小demo 二.绘制功能 2.1.绘制矩形 2.1.1.非面向思想实现动画 2.1.2.面向对象思维实现动画 2.2.绘制路径 2.3.绘制圆弧(动态圆形 ...
canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）...
[下篇] -- 建议学习时间4小时课程共(上中下)三篇此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
html坐标绘制路径,canvas学习笔记之绘制简单路径
1 线段(直线路径) 绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画 ...
学习笔记之车道线相关记录
一. 车道线相关的知识 &&1.标线的分类以下分类来自于百科: 按照道路交通标线的功能划分为:指示标线.警告标线和禁止标线. 按标划方法可分为:白色虚线.白色实线.黄色虚线.黄色实线 ...
OpenGL学习笔记(2) 画一个正方形
画一个正方形其实,画正方形就是画两个三角形,用四个顶点以及使用索引来实现完整代码在Square项目的Application.cpp里先贴上窗口初始化代码 void BaseInit() {glf ...

Canvas学习笔记之画线

Canvas学习笔记之画线

步骤

注意事项

效果图

Canvas学习笔记之画线相关推荐

最新文章

热门文章