本文摘自PHP中文网,作者清浅,侵删。
今天将和大家分享HTML5中canvas元素的使用,有一定参考价值,希望对大家有所帮助。【推荐课程:HTML5教程】
canvas元素
主要使用 JavaScript 在网页上绘制图像画布是一个矩形区域,可以控制其每一像素而且canvas 拥有多种绘制路径、矩形、圆形、以及添加图像的方法,接下来将在文章中为大家详细介绍
html代码
1 |
|
矩形
fillStyle:用来给图形添加色彩的
fillRect(x,y,width,height)
x:距离左上角的x值
y:距离左上角的y值
width,height:就是图形的宽高
1 2 3 4 5 6 |
|
线条
moveTo:线条开始位置
lineTo:结束位置
lineWidth:线条宽度
strokeStyle:颜色
stroke:开始绘制
1 2 3 4 5 6 7 |
|
圆形
beginPath():开始路径
arc(x,y,r,sAngle,eAngle,counterclockwise)
x,y:为圆的中心点坐标
r:圆的半径
sAngle,eAngle:圆的起始角和结束角
counterclockwise:可写可不写规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
1 2 3 4 5 6 |
|
图形插入
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
sx,sy:剪切的 x,y 坐标位置
swidth,sheight:被剪切图像的宽度和高度
x,y:在画布上放置图像的 x,y 坐标位置
width,height:要使用的图像的宽度和高度
1 2 3 4 5 |
|
总结:以上就是本篇文章的全部内容了,希望通过本篇文章对大家有所帮助。
以上就是HTML5中canvas元素如何绘制图形的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
借助todataurl实现将html5 canvas的内容保存为图片
更多相关阅读请进入《canvas》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者