<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas</title>
<script type="text/javascript"></script>
<script>
window.onload=function(){
//1.获取画布
var canvas=document.getElementById("canvas");
//2.获取画笔(获取上下文对象)
var cx=canvas.getContext("2d");
//3.设置画笔样式
cx.fillStyle='red'; //实心画笔样式
cx.strokeStyle='blue'; //空心画笔样式
//4.绘制图形
// 1.绘制矩形 1-2起始坐标 3-4 宽度,高度
// cx.fillRect(0,0,100,50); //实心矩形红色
// cx.strokeRect(100,100,100,50); //空心矩形蓝色
// 2.绘制圆形1-2圆心坐标 3半径 4-5起始角和结束角 6是否按逆
// cx.beginPath();
// cx.arc(200,200,100,0,Math.PI*2); //圆
// cx.arc(200,200,100,0,Math.PI,true); //半圆
// cx.arc(200,200,100,0,Math.PI/3,false); //弧
// cx.closePath(); //关闭路径,弧线
// cx.fill(); //实心圆 红色
// cx.stroke(); //空心圆 蓝色
// 3.绘制线段
// cx.lineWidth=5; //线段粗细
// cx.beginPath();
// cx.moveTo(0,0);
// cx.lineTo(100,100);
// cx.lineTo(200,10);
// cx.lineTo(300,100);
// cx.closePath(); //路径封闭
// cx.stroke();
// cx.moveTo(0,200);
// cx.lineTo(200,200);
// cx.stroke();
// 4.绘制渐变图形
// 线性渐变
// var g=cx.createLinearGradient(0,0,200,200);
// g.addColorStop(0.2,"red");
// g.addColorStop(0.6,"pink");
// g.addColorStop(1,"blue");
// cx.fillStyle=g;
// cx.fillRect(0,0,200,200);
// 径向渐变,围绕圆的半径向外渐变???????
// var g=cx.createRadialGradient(200,200,50,100,100,200); //起始圆终点圆坐标
// g.addColorStop(0.2,"red");
// g.addColorStop(0.5,"orange");
// g.addColorStop(1,"green");
// cx.fillStyle=g;
// // cx.fillRect(0,0,400,400);
// cx.beginPath();
// cx.arc(200,200,200,0,Math.PI*2);
// cx.closePath();
// cx.fill();
// 5.平移,扩大,变形
// 保存和回滚
// cx.save();
// cx.fillRect(0,0,100,50);
// cx.translate(100,100); //把坐标轴移了
// cx.save();
// cx.scale(2,2); //坐标轴放大
// cx.save();
// cx.rotate(Math.PI/3); //坐标轴旋转60度
// cx.save();
// cx.fillRect(0,0,100,50);
// cx.restore();
// cx.restore();
// cx.fillRect(120,0,100,50);
// 6.图形组合
// cx.fillRect(100,100,100,100);
// cx.globalCompositeOperation="destination-over";
// cx.beginPath();
// cx.arc(200,200,50,0,Math.PI*2);
// cx.closePath();
// cx.fillStyle="blue";
// cx.fill();
// 7.绘制文本
cx.font="20px blod";
cx.fillText("hello",200,200); //实心红色
cx.strokeText("world",200,100); //空心 蓝色
}
</script>
</head>
<body>
<canvas width="400px" height="400px" id="canvas" style="background-color:#ccc"></canvas>
</body>
</html>
h5API_画布
最新推荐文章于 2022-08-30 15:19:33 发布