<!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,10,200,200);
context.fillStyle="blue"
填充一个区域
context.fillRect(10,10,100,100);
}
//画田字格
function showt(){
var canvas=document.getElementById("can");
var context=canvas.getContext("2d");
context.strokeStyle="red";
context.strokeRect(10,10,100,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,100,50,0,Math.PI*2,false);
// 画线
// context.stroke();
// 填充颜色
context.fillStyle="blue";
// 填充
context.fill();
//重新开始一个 否则会覆盖掉
context.beginPath();
context.arc(100,100,25,0,Math.PI*2,false);
context.fillStyle="red";
context.fill();
}
</script>
</head>
<body>
<canvas id="can" width="500px" height="400px"></canvas>
<br>
<input type="button" value="直线" οnclick="showline()">
<input type="button" value="五角星" οnclick="showfivestar()">
<input type="button" value="矩形" οnclick="showrect()">
<input type="button" value="田字格" οnclick="showt()">
<input type="button" value="圆形" οnclick="showcircle()">
</body>
</html>
html5 context属性解释及代码实例
最新推荐文章于 2022-11-06 17:41:14 发布