我要评论var huaban = document.queryselector('.canvas');//画板
var bicaso = huaban.getcontext('2d');//画家 canvas上下文对象
//绘画操作
//表示在距离画板左上10px 10px的位置画了一个长宽分别为50px的矩形，默认填充颜色黑色 绘制矩形
bicaso.fillrect(10,10,50,50);
//表示绘制轮廓线
bicaso.strokerect(10,10,50,50);
//绘制画笔颜色
bicaso.fillstyle='颜色';
//擦除矩形方法
bicaso.clearrect(x,y,要擦除的矩形宽度，要擦除的矩形高度);
globalalpha = transparencyvalue: 这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
globalalpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为使用rgba()设置透明度更加好一些。
canvas基础demo
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
</head>
<body>
<!-- 在页面中添加canvas元素 -->
<!--1. 创建一块画布。必须定义canvas的id属性以方便js调用。 可以使用css控制canvas的外观 -->
<canvas id="mycanvas" width="300" height="300" style="border: 2px solid red;">
<!-- 通过javascript可以在画布中添加线条文字图片动画，也可以绘画 -->
<!-- 有些浏览器不支持canvas元素，会直接忽略canvas元素显示替代内容。所以需要为这些浏览器提供替代canvas的显示内容 -->
您的浏览器不支持canvas，请更新或更换浏览器。
</canvas>
<canvas id="canvas2" width="300" height="300" style="border: 2px solid red;">您的浏览器不支持canvas</canvas>
<canvas id="tutorial" width="300" height="300" style="border: 2px solid red;">您的浏览器不支持canvas</canvas>
<script>
// 2.在js脚本中获取到canvas元素
var canvas = document.getelementbyid('mycanvas');
// 判断getcontext()方法是否存在，来检测浏览器是否支持canvas==========================
if(canvas.getcontext) {
alert("您的浏览器支持canvas");
}else {
alert("您的浏览器不支持canvas");
}
// ===============================================================================
// 3.通过canvas的getcontext()方法获取画布上下文，即创建context对象。以获取允许进行绘画的2d环境。 或者3d环境("3d")
var context = canvas.getcontext("2d");//getcontext("2d")该方法用于返回一个内建的h5对象，该对象提供了用于绘图的方法和属性，使用该对象可以在canvas画布中绘制图形。 相当于画笔。
// 4.绘制图形的操作 =============================================================================================================
//绘制一个矩形，填充色为蓝色，矩形坐标为(10,10) 长50宽80。-------------------------------
context.fillstyle="blue";
context.fillrect(10,10,50,80);//strokerect(x,y,width,height) clearrect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。
// 循环生成若干个40px的小矩形，边框颜色随机-------------------------------------------------
function draw0(){
var canvas = document.getelementbyid('canvas2');
if (!canvas.getcontext) return;
var ctx = canvas.getcontext("2d");
for (var i = 0; i < 6; i++){//6行6列
for (var j = 0; j < 6; j++){
ctx.fillstyle = "rgb(${randomint(0, 255)},${randomint(0, 255)},${randomint(0, 255)})";
// ctx.fillstyle = "rgb(randomint(0, 255),randomint(0, 255),randomint(0, 255))";
ctx.strokerect(j * 50, i * 50, 40, 40);
// ctx.fillrect(j * 50, i * 50, 40, 40);
}
}
}
draw0();
/**
返回随机的 [from, to] 之间的整数(包括from，也包括to) 颜色随机生成失败？？？？？？？？？？？？？？？？
*/
function randomint(from, to){
return parseint(math.random() * (to - from + 1) + from);
}
//绘制一条直线-------------------------------------------------
context.moveto(0,0);
context.lineto(200,30);
context.stroke();
// 绘制复杂图形--------使用绘制路径方法--------math.sin()----math.cos()------math.pi------beginpath()---lineto()----closepath()-----------
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginpath();//开始一条路径 或重置当前路径
context.fillstyle = 'orange';//填充属性设置
context.strokestyle = 'yellow';//边框样式
context.linewidth = '1';//边框宽度
var x = math.sin(0);//使用sin cos三角函数计算顶点坐标x,y
var y = math.cos(0);
var dig = math.pi / 15 * 11;//math.pi返回的是圆周率 π
for(var i = 0;i<30;i++) {//表示30个点的连线
var x = math.sin(i * dig);
var y = math.cos(i * dig);
context.lineto(dx+x*s,dy+y*s);
}
context.closepath();//关闭路径
context.fill();//填充 默认填充黑色
context.stroke();//边框 默认黑色
// 绘制圆形----------------beginpath()----arc()-----closepath()-------------------------------
// arc(x,y,r,sangle,eangle,counterclockwise);---x,y表示圆心坐标---r表示圆版半径---sangle起始角【0】---eangle结束角【2*math.pi】---counterclockwise规定逆时针还是顺时针绘图（false顺时针，true逆时针）
context.fillstyle = "blue";//设置画笔填充颜色样式
context.strokestyle = 'red';//设置边框颜色样式
context.strokewidth = '2';
context.beginpath();//开始创建路径
context.arc(50,50,50,0,2*math.pi,true);//圆心坐标(50,50) 半径50 逆时针旋转 从0°~360°
context.closepath();
context.fill();
context.stroke();
// 绘制14条弧形-------------------------0°表示水平线 +90°表示负y轴方向-----------------------------------------------------------
for(var i=0;i<15;i++) {
context.strokestyle='red';
context.beginpath();
context.arc(10,300,i*10,0,math.pi*3/2,true);//弧心坐标(0,300) 半径10*i 逆时针旋转0°~((1/2)π)° 逆时针旋转0°~90°
context.closepath();//从当前点到开始点的闭合路径操作
context.stroke();
}
// 绘制圆弧-------------通过使用控制点----arcto(x1,y1,x2,y2,r);--控制点1坐标 控制点2坐标 圆弧半径----------------------------------------
context.beginpath();
context.moveto(150,150)//起点坐标
context.arcto(200,150,200,250,60);//arcto表示绘制的图形由两条切换所决定。l1为起始点和控制点1的直线，l2为控制点1和控制点2的直线
context.lineto(250,250);//到达的下一点的坐标
context.stroke();//绘图
context.fill();//填充
// 绘制路径------------------------路径都是闭合的----------------------------------
function draw1() {
context.fillstyle="orange";
context.beginpath();//新建一条路径
context.moveto(10,10);//将画笔移动到指定坐标
context.lineto(200,50);
context.lineto(10,50);
context.closepath();//闭合
context.stroke();//绘制路径
context.fill();//填充闭合区域
}
draw1();
// 透明度 transparency(0.0,1.0) globalalpha = transparencyvalue; 如果不是大量需要设置透明度，用rgba就够了
// linewidth 线条宽度
// linecap = type 线条末端样式 butt--末端以方形结束 round--末端以圆形结束 square--末端以方形结束，但两端都增加了一个长度为线宽一半的矩形区域
// linejoin=type 线条接合处样式 round--弧形 bevel--接合处以横线为底 miter(默认)--接合处延申相连部分的外边缘，形成灵性
function draw3(){
var canvas = document.getelementbyid('tutorial');
if (!canvas.getcontext) return;
var ctx = canvas.getcontext("2d");
var linejoin = ['round', 'bevel', 'miter'];
ctx.linewidth = 20;
for (var i = 0; i < linejoin.length; i++){
ctx.linejoin = linejoin[i];
ctx.beginpath();
ctx.moveto(50, 50 + i * 50);
ctx.lineto(100, 100 + i * 50);
ctx.lineto(150, 50 + i * 50);
ctx.lineto(200, 100 + i * 50);
ctx.lineto(250, 50 + i * 50);
ctx.stroke();
}
}
draw3();
</script>
</body>
</html>
小白进阶，期待学友共同讨论和补充
如对本文有疑问， 点击进行留言回复！！
清除新版Google Chrome浏览器中表单控件（input，button...）默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错：Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导（一） --WHQL认证测试结果提交账号（一）
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论