HTML5
发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了小强的HTML5移动开发之路（6）——Canvas图形绘制基础，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
来自：http://blog.csdn.net/dawanganban/article/details/17686039
在前面提到Canvas是HTML5中一个重要特点，canvas功能非常强大,用photoshop可以实现的效果canvas也同样可以实现，下面我们用canvas实现基本图形的绘制。
一、Canvas标签的使用
- <!DOCTYPE html>
- <html>
- head>
- Meta charset="utf-8"</>
- body>
- canvas id="1" width="200" height="200" style="border:1px solid red">canvas>
- >
可以看到Canvas就像一块画布，我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。
二、画矩形
canvas id="1" width="500" height="500" style="border:1px solid red" onmousemove="mousexy(envent)"script type="text/javascript">
var c=document.getElementById('1');
var p=c.getContext("2d");
span style="white-space:pre"> span>//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
p.fillStyle="#FF0000";
p.fillRect(0, 0, 300, 300);
p.fillStyle="rgba(0,255,0.5)";
p.fillRect(200,200,500,500);
script
三、画线条
>
>
>
canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)">
var c=document.getElementById('1');
var p=c.getContext("2d");
p.moveTo(10,10);
p.lineTo(150,50);
p.lineTo(10,50);
p.stroke();
四、画圆形
>
>
var c=document.getElementById('1');
var p=c.getContext("2d");
p.fillStyle="#FF0000";
p.beginPath();
p.arc(80,80,15,Math.PI*2,true);
p.closePath();
p.fill();
>
五、渐变
>
var c=document.getElementById("1");
var cxt=c.getContext("2d");
var Grd=cxt.createLinearGradient(0,175,50);
Grd.addColorStop(0,"#FF0000");
Grd.addColorStop(1,"#00FF00");
cxt.fillStyle=Grd;
cxt.fillRect(0,50);
六、绘制图片
<!DOCTYPE HTML>
canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
>
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0);
七、多边形
>
var c=document.getElementById('1');
var p=c.getContext("2d");
p.fillStyle="#FF0000";
p.moveTo(10,10);
p.lineTo(150,50);
p.lineTo(10,50);
p.lineTo(20,30);
p.fill();
大佬总结
以上是大佬教程为你收集整理的小强的HTML5移动开发之路（6）——Canvas图形绘制基础全部内容，希望文章能够帮你解决小强的HTML5移动开发之路（6）——Canvas图形绘制基础所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
