系列文章目录

本文开始是canvas，通俗易懂，小白也没烦恼，根据慕课网liuyubobobo老师的视频课学习整理
视频课指路：慕课网 liuyubobobo老师炫丽的倒计时效果Canvas绘图与动画基础

文章目录

系列文章目录
1、声明标签
2、画一条直线
3、线条组成的图形 - 画一个三角形
4、多边形填充加描边
5、定义两个形状
6、七巧板demo例子
7、绘制正方形demo
总结

1、声明标签

宽高在标签上

<canvas id="canvas" width="1024" height="768"style="background-color: rgb(200,200,200);display: block;margin: 20px auto;"
>当前浏览器不支持canvas，请更换浏览器后再试
</canvas>

宽高在js中设置

<canvas id="canvas" style="background-color: rgb(200,200,200);display: block;margin: 20px auto;">当前浏览器不支持canvas，请更换浏览器后再试
</canvas>

window.onload = function () {// 获取var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768// 判断该浏览器是否可以使用canvasif (canvas.getContext('2d')) {// 使用2d绘图var context = canvas.getContext('2d')// 使用context绘制} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}

2、画一条直线

canvas先设置状态最后绘制
画一条直线js代码

context.moveTo(x, y) 起点
context.lineTo(x, y) 终点
context.lineWidth = 5 线宽
context.strokeStyle = ‘#005588’ 线样式
context.stroke() 绘制

window.onload = function () {var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.moveTo(100, 100)// 到坐标(700,700)为终点画一条直线context.lineTo(700, 700)// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#005588'// 执行划直线这个操作context.stroke()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}

效果

3、线条组成的图形 - 画一个三角形

window.onload = function () {var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.moveTo(100, 100)context.lineTo(700, 700)context.lineTo(100, 700)context.lineTo(100, 100)// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#005588'// 执行划直线这个操作context.stroke()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}

4、多边形填充加描边

context.fillStyle = ‘rgb(2,100,30)’ 填充的颜色
context.fill() 填充

window.onload = function () {var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.moveTo(100, 100)// 到坐标(700,700)为终点画一条直线context.lineTo(700, 700)context.lineTo(100, 700)context.lineTo(100, 100)// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#f00'// 执行划直线这个操作context.stroke()// 多边形填充context.fillStyle = 'rgb(2,100,30)'context.fill()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}

5、定义两个形状

context.beginPath() 起始
context.closePath() 结束
这两个方法将两段路径包裹起来将其与其它路径分隔开

window.onload = function () {var canvas = document.getElementById('canvas')canvas.width = 1024canvas.height = 768if (canvas.getContext('2d')) {var context = canvas.getContext('2d')// 使用context绘制// 从坐标(100,100)为起点开始context.beginPath()context.moveTo(100, 100)// 到坐标(700,700)为终点画一条直线context.lineTo(700, 700)context.lineTo(100, 700)context.lineTo(100, 100)context.closePath()// 线宽为5context.lineWidth = 5// 线的样式颜色context.strokeStyle = '#f00'// 执行划直线这个操作context.stroke()// // 多边形填充// context.fillStyle = 'rgb(2,100,30)'// context.fill()context.beginPath()context.moveTo(200, 100)context.lineTo(700, 600)context.closePath()context.strokeStyle = '#000'context.stroke()} else {alert('当前浏览器不支持canvas，请更换浏览器后再试')}
}

6、七巧板demo例子

html部分

<canvas id="canvas" width="800" height="800" style="background-color: aliceblue;display: block;margin: 10px auto;">当前浏览器不支持canvas，请更换浏览器后再试
</canvas>

自造数据部分

var tangram = [{p: [{x: 0,y: 0},{x: 800,y: 0},{x: 400,y: 400},],color: '#caff67'}, {p: [{x: 0,y: 0},{x: 400,y: 400},{x: 0,y: 800},],color: '#67becf'}, {p: [{x: 0,y: 800},{x: 400,y: 400},{x: 400,y: 800},],color: '#f50'}, {p: [{x: 400,y: 800}, {x: 800,y: 800}, {x: 400,y: 400}, ],color: '#0f5'}, {p: [{x: 400,y: 400}, {x: 800,y: 0}, {x: 600,y: 600}, ],color: '#25f'}, {p: [{x: 800,y: 0}, {x: 600,y: 600}, {x: 800,y: 800}, ],color: '#f33'},
]

js部分

let canvas = document.getElementById('canvas')if (canvas.getContext('2d')) {var context = canvas.getContext('2d')tangram.forEach((item, index) => {draw(item, context)})}function draw(piece, cxt) {cxt.beginPath()cxt.moveTo(piece.p[0].x, piece.p[0].y)piece.p.forEach((item, index) => {cxt.lineTo(item.x, item.y)})cxt.closePath()cxt.fillStyle = piece.colorcxt.fill()cxt.lineWidth = 2cxt.strokeStyle = '#000'cxt.stroke()
}

7、绘制正方形demo

<canvas id="canvas" width="1024" height="768" style="display: block;
background-color: #eee;margin: 10px auto;">不能使用
canvas
</canvas>
<script>var canvas = document.getElementById('canvas')var context = canvas.getContext('2d')drawRect(context, 100, 100, 400, 400, 10, '#600', '#008833')function drawRect(cxt, x, y, width, height, borderWidth, borderColor, borderFill) {cxt.beginPath()cxt.moveTo(x, y)cxt.lineTo(x + width, y)cxt.lineTo(x + width, y + height)cxt.lineTo(x + width, y + height)cxt.lineTo(x, y + height)cxt.closePath()cxt.lineWidth = borderWidthcxt.strokeStyle = borderColorcxt.fillStyle = borderFillcxt.fill()cxt.stroke()}
</script>

总结

本文问canvas第一节，之后会持续更新，大家感觉还实用的话，关注或者点个赞都可以，谢谢啦

canvas基础1 - 画直线（通俗易懂）相关推荐

html5点线的设置,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
如果你还不知道canvas是什么,可以看看. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在canvas中也是如此. 在开始之前我们先拿出画布和画笔: 复制代码代码如下: var ...
Silverlight学习笔记三(鼠标点击动态画直线|动态设置Ellipse的Canvas.Top与Canvas.Left|动态设置Stroke属性的方法。)...
我有可能需要把AutoCAD的部分功能搬到浏览器上,先练习一下画直线的方法.如图: MainPage.xaml代码: 大气象 <UserControl x:Class="DrawLin ...
HTML怎么在矩形上画直线,【绘制】HTML5 Canvas 绘画画板，实现鼠标画线条，画矩形或选区（图文、示例）...
个人处女做<Canvas系列教程>在个人Github上正在连载更新,但愿能获得您的关注和支持,让我有更多的动力进行创做.html 教程介绍.教程目录等能在README里查阅.git 目录函 ...
php 画直线,html5 Canvas实现画直线与设置线条的样式
这篇文章主要介绍了关于html5 Canvas实现画直线与设置线条的样式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形. ...
在html5绘制直线的两个方法,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
如果你还不知道Canvas是什么,可以看看上一篇. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在Canvas中也是如此. 在开始之前我们先拿出画布和画笔: 复制代码代码如下: v ...
橡皮筋画直线c 语言,canvas——橡皮筋式线条绘图应用
什么叫橡皮筋式指画图时橡皮筋一样伸缩自如.. 例子如下? 思路思路很简单,只有橡皮筋式绘制功能要注意,以下总结mousedown,mousemove,mouseup三个阶段的思路 mousedow ...
橡皮筋画直线c 语言,canvas 橡皮筋式线条绘图应用方法
什么叫橡皮筋式指画图时橡皮筋一样伸缩自如.. 例子如下:point_down: 思路思路很简单,只有橡皮筋式绘制功能要注意,以下总结mousedown,mousemove,mouseup三个阶段的 ...
好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
好程序员分享24个canvas基础知识小结 1
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...

canvas基础1 - 画直线（通俗易懂）

系列文章目录

文章目录

1、声明标签

2、画一条直线

3、线条组成的图形 - 画一个三角形

4、多边形填充加描边

5、定义两个形状

6、七巧板demo例子

7、绘制正方形demo

总结

canvas基础1 - 画直线（通俗易懂）相关推荐

最新文章

热门文章