<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
canvas {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<script>
window.onload = function () {
var c = document.getElementById("myCanvas");
// console.log("haha");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(30, 30, 70, 70); //发生渐变的区域 这里指的就是绘制渐变的线条
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
// 填充渐变
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 150, 80); //黑和白填充的区域范围
var c2 = document.getElementById("myCanvas2");
var ctx2 = c2.getContext("2d");
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 150, 80);
};
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<canvas id="myCanvas2"></canvas>
</body>
</html>
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,50,10);
}
</script>
</body>
</html> -->
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
