html5中可以实现绘画图形的功能，需要注意的是html5只提供2D，不提供3D绘画功能。canvas元素是H5总新增的元素，它用来专门绘制图形。你也可以把canvas元素理解成一块“画布”，我们可以在其中绘制图形。在canvas元素中绘画不是拿鼠标来绘制图形，实际上在H5完成绘画功能，不仅仅需要canvas元素，而且需要JavaScript脚本来配合才能完成绘制图形。所以说把html5中的canvas元素理解成画布是是合适不过的。
html5中的canvas元素
canvas元素必须要指定id、width（宽）、height（高）属性，虽然canvas元素是H5中用来绘制的图形，但是它的放置放和其他的元素没有区别。比如说canvas id="myCanvas" width="200" height="100"是放置了一个200*100的canvas元素。
html5中的常用的绘制图形
绘制矩形
创建canvas元素→取得上下文（使用canvas对象的getcontent方法获得上下文）→填充绘制边框→设定样式→指定线宽、颜色。代码如下图：
可以用clearRect方法擦除指定区域的图形，使矩形区域颜色变透明，context.clearRect(x,y,width,height)。
绘制圆形
绘制圆形要比矩形复杂一点，需要使用到路径，创建图形路径→关闭路径→调用绘制方法、路径。代码如下：
cxt.beginPath()是开始创建路径，有几次是循环创建路径，每次开始都需要调用beginPath()函数。
cxt.arc(70,18,15,0,Math.PI*2,true)是是创建路径，使用了arc（）方法，它的语法如下：
cxt.closePath()cxt.fill()关闭绘画路径后调用绘制路径。
1、使用画布的话，你直接在绘制的长方形基础上，在右上角再绘制一个空白的长方形就好了，然后在空白的部分绘制不规则图形；
2、或者，直接绘制一个右上角空白的图形，在空白部分进行你的绘制。
canvas按照坐标进行绘制，你直接确定坐标就给你画好了，网上关于canvas教程很多，自己看下吧。链接：网页链接
1、canvas绘制矩形
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas绘制矩形</title>
<script type="text/javascript" src="canvas2.js"></script>
<style type="text/css">
body {
margin: 0
padding: 0
}
</style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
js:
/*** Created by winson on 2016/9/11.
*/
function draw(id) {
var canvas = document.getElementById(id)//用getElementById获取到canvas对象
var context = canvas.getContext('2d')//取得上下文
context.fillStyle = "green"//绘制背景的颜色
context.strokeStyle = "#fff"//绘制边框的颜色
context.lineWidth = 5 //设置画笔宽度
context.fillRect(0, 0, 400, 300)//绘制
context.strokeRect(50, 50, 180, 120)
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）