大佬教程收集整理的这篇文章主要介绍了html5 context属性解释及代码实例，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title></title>
<script>
// 画直线
function showline(){
// 获取画布
var canvas=document.getElementById("can")
// 获取上下文
var context=canvas.getContext("2d");
// 设置开始位置
context.moveTo(10,10);
// 设置结束位置
context.lineTo(100,200);
// 开始画
context.lineTo(190,10);
// 改变线的颜色
context.strokeStyle="red";
// 线的宽度
context.lineWidth=5;
context.lineJoin="round";
context.stroke();
}
// 画五角星
function showfivestar(){
var canvas=document.getElementById("can");
var context=canvas.getContext("2d")
context.moveTo(31,264);
context.lineTo(81.75,211);
context.lineTo(61,287);
context.lineTo(39.75,212);
context.lineTo(93.25,264);
context.lineTo(31,264);
context.strokeStyle="red";
context.lineWidth=5;
context.stroke();
}
//画矩形
function showrect(){
// 获取画布
var canvas=document.getElementById("can");
var context=canvas.getContext("2d");
// context.strokeRect(10,10,100,100);
//// 红线
// context.strokeStyle="red";
//// 线宽
// context.lineWidth=5;
// 填充颜色 必须在画之前声明
// 绘制圆形的结束线帽：样式
// lineCap 属性设置或返回线条末端线帽的样式。
// 属性值
// 值 描述
//butt 默认。向线条的每个末端添加平直的边缘。
//round 向线条的每个末端添加圆形线帽。
//square 向线条的每个末端添加正方形线帽。
context.lineCap="round";
// 当两条线条交汇时，创建圆形边角：
// lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。
// 属性值
// 值 描述
// bevel 创建斜角。
// round 创建圆角。
// miter 默认。创建尖角。
context.lineJoin="round";
// 属性说明如何绘制交点。
// 当宽线条使用设置为 "miter" 的 lineJoin
// 属性绘制并且两条线段以锐角相交的时候，所得
// 的斜面可能相当长。当斜面太长，就会变得不协
// 调。miterLimit 属性为斜面的长度设置一个上
// 限。这个属性表示斜面长度和线条长度的比值。
// 默认是 10，意味着一个斜面的长度不应该超过
// 线条宽度的 10 倍。如果斜面达到这个长度，它
// 就变成斜角了。当 lineJoin 为 "round" 或
// "bevel" 的时候，这个属性无效。
context.miterLimit;
context.fillStyle="red";
//// 填充一个区域
context.fillRect(10,200,200);
context.fillStyle="blue"
//// 填充一个区域
context.fillRect(10,100);
}
//画田字格
function showt(){
var canvas=document.getElementById("can");
var context=canvas.getContext("2d");
context.strokeStyle="red";
context.strokeRect(10,100);
context.moveTo(60,10);
context.lineTo(60,110);
context.moveTo(10,60);
context.lineTo(110,60);
context.stroke();
}
// 画圆形
function showcircle(){
var canvas=document.getElementById("can");
var context=canvas.getContext("2d");
// 圆心，半径，开始角度，结束角度
context.arc(100,50,Math.PI*2,falsE);
// 画线
// context.stroke();
// 填充颜色
context.fillStyle="blue";
// 填充
context.fill();
//重新开始一个 否则会覆盖掉
context.beginPath();
context.arc(100,25,falsE);
context.fillStyle="red";
context.fill();
}
</script>
</head>
<body>
<canvas id="can" width="500px" height="400px"></canvas>
<br>
<input type="button" value="直线" onclick="showline()">
<input type="button" value="五角星" onclick="showfivestar()">
<input type="button" value="矩形" onclick="showrect()">
<input type="button" value="田字格" onclick="showt()">
<input type="button" value="圆形" onclick="showcircle()">
</body>
</html>
以上是大佬教程为你收集整理的html5 context属性解释及代码实例全部内容，希望文章能够帮你解决html5 context属性解释及代码实例所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。