<html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
#tutorialval {
/* transform: scaleX(180deg); */
transform: rotateX(180deg);
}
</style>
</head>
<body onload="draw();">
<canvas id="tutorialvalsdom" width="500" height="300"></canvas>
<canvas id="tutorialvals" width="500" height="300"></canvas>
<canvas id="tutorialval" width="500" height="300"></canvas>
<canvas id="tutorial" width="500" height="400"></canvas>
</body>
<script type="text/javascript">
let wins = window
// wins.requestAnimationFrame(painting)
let i = 0
let y = 0
let dep=false
function anmation() {
for (let j = 0; j < 4; j++) {
// console.log(j)
y = j
painting()
// for (let t = 0; t < 20; t++) {
// }
}
}
function painting() {
var tutorialvalsdom = document.getElementById('tutorialvalsdom');
var ctx = tutorialvalsdom.getContext('2d');
ctx.moveTo(10, 10 * y)
console.log(y)
ctx.lineTo(i, 10 * y)
ctx.stroke()
// console.log(i)
if (i < 200) {
window.requestAnimationFrame(painting)
}else{
}
i = i + 1
}
function draw() {
var arr = '11222'
var tutorialvalsdom = document.getElementById('tutorialvalsdom');
var canvasvals = document.getElementById('tutorialvals');
var canvasval = document.getElementById('tutorialval');
var canvas = document.getElementById('tutorial');
if (tutorialvalsdom.getContext) {
anmation()
}
// 贝塞尔
if (canvasvals.getContext) {
var ctx = canvasvals.getContext('2d');
ctx.beginPath()
ctx.moveTo(95, 35)
ctx.quadraticCurveTo(35, 15, 25, 62.5)
// ctx.lineTo()
ctx.quadraticCurveTo(25, 100, 75, 200);
ctx.quadraticCurveTo(90, 230, 125, 190);
ctx.lineTo(128, 210)
ctx.lineTo(131, 190)
ctx.lineTo(133, 210)
ctx.lineTo(135, 190)
ctx.lineTo(138, 210)
ctx.lineTo(141, 190)
ctx.quadraticCurveTo(160, 230, 200, 200);
ctx.lineTo(220, 160)
ctx.lineTo(225, 140)
ctx.lineTo(223, 3 + 0)
// ctx.quadraticCurveTo(100, 100, 75, 50);
ctx.stroke()
}
// 遍历数组表格
if (canvasval.getContext) {
var ctx = canvasval.getContext('2d');
function arrlist(val) {
console.log(val);
ctx.beginPath();
ctx.moveTo(10, 10)
ctx.lineTo(10, 300)
ctx.strokeStyle = '#6950a1'
ctx.stroke()
ctx.beginPath();
ctx.moveTo(10, 10)
ctx.lineTo(500, 10)
ctx.strokeStyle = '#6950a1'
ctx.stroke()
let arr = [{ name: 'cs', val: 5, }, { name: 'cs', val: 6, }, { name: 'cs', val: 3, }, { name: 'cs', val: 1, }, { name: 'cs', val: 8, }, { name: 'cs', val: 1, }, { name: 'cs', val: 2, }, { name: 'cs', val: 3, }]
// 寻找百分比定义最大高度
let maxval = 0;
if (arr) {
maxval = arr[0].val
}
arr.forEach((item, index) => {
if (maxval < item.val) {
maxval = item.val
}
})
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
ctx.beginPath();
ctx.fillStyle = '#1d953f';
// 计算百分比
let valper = 280 / maxval;
// 宽度
let widthval = 500 / arr.length - 20;
// 自适应宽度
let paddingval = 0;
if (i == 0) {
paddingval = 10;
} else {
paddingval = (20 * (i) + (500 / arr.length - 20) * (i)) + 10;
}
// 计算左右相聚 自身宽20 加左边10 固定宽
// let paddingval = 10*(i+1) + 20*(i+1);
// 计算高度
let hightval = valper * arr[i].val
// console.log(paddingval,hightval);
ctx.fillRect(paddingval, 10, widthval, hightval);
}
// ctx.beginPath();
// ctx.fillStyle = '#1d953f';
// ctx.fillRect(20, 10, 20, 10);
// ctx.fill()
// ctx.stroke()
}
arrlist(arr)
}
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// 一个新的绘画路径
ctx.beginPath();
// 颜色修改
ctx.fillStyle = '#1d953f';
// 前两位置 后两宽高 fillRect 设置矩形
ctx.fillRect(100, 100, 100, 100);
// clearRECT 清除某些区域颜色
ctx.clearRect(15, 15, 20, 20);
ctx.strokeRect(20, 20, 10, 10)
ctx.beginPath()
ctx.fillStyle = '#6950a1';
ctx.fillRect(20, 20, 10, 10)
ctx.beginPath()
// 形状内颜色
ctx.fillStyle = '#1d953f';
// strokeStyle设置边框颜色
ctx.strokeStyle = '#6950a1';
// 左 右 半径 起始点 结尾点 false 顺时针 true 逆时针
// 0->0.5->1>1.5>2
ctx.arc(150, 99, 50, 1 * Math.PI, 2 * Math.PI, false)
// 加载fill颜色
ctx.fill();
// ???应该未形状内颜色渐变
ctx.globalAlpha = 0.2;
ctx.fillStyle = 'white'
// 加载边框颜色
ctx.stroke();
ctx.beginPath()
ctx.arc(150, 99, 40, 1 * Math.PI, 2 * Math.PI, false)
ctx.fill();
ctx.beginPath()
ctx.arc(150, 99, 30, 1 * Math.PI, 2 * Math.PI, false)
ctx.fill();
ctx.beginPath()
ctx.arc(150, 99, 20, 1 * Math.PI, 2 * Math.PI, false)
ctx.fill();
ctx.beginPath()
ctx.arc(150, 99, 10, 1 * Math.PI, 2 * Math.PI, false)
ctx.fill();
ctx.beginPath()
ctx.arc(150, 99, 5, 1 * Math.PI, 2 * Math.PI, false)
ctx.fill();
ctx.globalAlpha = 1;
ctx.beginPath();
// 颜色修改
ctx.fillStyle = '#1d953f';
// 前两位置 后两宽高 fillRect 设置矩形
ctx.fillRect(200, 200, 100, 100);
// clearRECT 清除某些区域颜色
ctx.clearRect(15, 15, 20, 20);
ctx.strokeRect(20, 20, 10, 10)
ctx.beginPath()
// 起始点
ctx.moveTo(201, 199);
// 第二点位置
ctx.lineTo(300, 199);
// 第三点
ctx.lineTo(300, 100);
// 绘制
ctx.fill()
ctx.beginPath()
ctx.moveTo(200, 301);
ctx.lineTo(200, 400);
ctx.lineTo(300, 301);
ctx.fill()
ctx.beginPath()
ctx.strokeStyle = '#6950a1';
ctx.moveTo(100, 200);
ctx.lineTo(200, 300);
ctx.stroke();
}
}
</script>
</html>
canvas 简单的dome 简单的图表
最新推荐文章于 2022-02-20 00:15:40 发布