Canvas 绘制渐变图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制圆形</title>
<script>
function draw(id){
let canvas = document.getElementById(id)
if (canvas == null){
return false
}
let context = canvas.getContext("2d")
context.fillStyle = "#eeeeef"
context.fillRect(0,0,600,700)
//为什么是i<10?因为要画10个圆
for(let i = 0;i<=10;i++){
//1.开始创建路径
context.beginPath();
//2.图形路径
//(圆心x轴坐标，圆心y轴坐标，半径，根据pi（3.1415926）来绘制，true)
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
//3.关闭路径
context.closePath();
//（前三个为三原色，透明度）
context.fillStyle = "rgba(255,0,0,0.25)";
//4.调用绘制方法
context.fill()
}
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="600px" height="700px"></canvas>
</body>
</html>
Canvas 绘制径向渐变
<!--
moveTo(x,y)作用是将光标移动到指定坐标点，lineTo绘制直线的时候以这个坐标点为起点。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>moveTo与lineTo</title>
<script>
function draw(id){
let canvas = document.getElementById(id)
let context = canvas.getContext("2d")
context.fillStyle = "#eeeeef"
context.fillRect(0,0,300,400)
let dx=150,dy=150,s=100
context.beginPath()
context.fillStyle = "rgb(100,255,100)"
//图形边框的样式
context.strokeStyle = "rgb(0,0,100)"
let x = Math.sin(0),y = Math.cos(0)
let dig = Math.PI / 15*11
for (let i=0;i<30;i++){
let x = Math.sin(i*dig)
let y = Math.cos(i*dig)
//lineTo绘制直线
context.lineTo(dx+x*s,dy+y*s)
}
context.closePath()
context.stroke()
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="300" height="400"></canvas>
</body>
</html>
Canvas 绘制变形图形
<!--bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)-->
<!--控制点，cp1是第一个，cp2是第二个-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BezierCurveTo贝塞尔曲线</title>
<script>
function draw(id){
let canvas = document.getElementById(id)
if (canvas==null){
return false;
}
let context = canvas.getContext("2d")
context.fillStyle = "rgb(238,233,233)"
context.fillRect(0,0,300,400)
let dx=130,dy=150,s=100
context.beginPath()
context.fillStyle = "rgb(255,228,225)"
let x = Math.sin(0),y = Math.cos(0)
let dig = Math.PI / 15*11
context.moveTo(dx,dy)
context.strokeStyle = "rgb(205,145,158)"
for (let i=0;i<30;i++){
let x = Math.sin(i*dig)
let y = Math.cos(i*dig)
//绘制贝塞尔曲线
context.bezierCurveTo(dx+x*s,dy+y*s-100,dy+x*s+100,dy+y*s,dx+x*s,dy+y*s)
}
context.closePath()
context.fill()
context.stroke()
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="300" height="400" style="background-color: #f2f2f2"></canvas>
</body>
</html>
Canvas 图形组合
<!--绘制渐变图形时需要使用到 LinearGradient 对象，使用图形上下文对象的 createLinearGradient 方法创建该对象。-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制渐变图形</title>
<script>
function draw(id){
let canvas = document.getElementById(id)
let context = canvas.getContext("2d")
//g1是createLinearGradient对象
// 0,0是起点坐标；0,300是终点坐标
let g1 = context.createLinearGradient(0,0,0,300)
/**addColorStop(）要设置两次，分别对应起始和终点，
括号内的第一个参数，表示渐变开始和结束的位置，值在0-1之间；
第二个参数，设定三原色颜色值 **/
g1.addColorStop(0.1,"rgb(255,255,0)")
g1.addColorStop(1,"rgb(0,255,255)")
//将渐变色填充给g1
context.fillStyle = g1
//绘制图形
context.fillRect(0,0,500,500)
//创建一个颜色和大小都在变化的
let g2 = context.createLinearGradient(0,0,300,0)
g2.addColorStop(0,"rgba(0,0,255,0.5)")
g2.addColorStop(1,"rgba(255,0,0,0.5)")
for (let i=0;i<10;i++){
//绘制路径
context.beginPath()
//把渐变色填充给g2
context.fillStyle = g2
//arc()代表圆形
context.arc(i*25,i*25,i*10,0,Math.PI*2,true)
//关闭路径
context.closePath()
//结束绘制
context.fill()
}
}
</script>
</head>
<body onload="draw('canvas')">
绘制渐变图形,createLinearGradient(起始坐标点，结束坐标点)
addColorStop(offset,color)设定颜色，offset颜色距离起始点的偏移量
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
Canvas 给图形绘制阴影
<!--
绘制变形图形，主要使用 translate（x，y）平移、scale (缩放)和 rotate（旋转角度） 方法
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制径向渐变图形</title>
<script>
function draw(id){
let canvas = document.getElementById(id)
//检查是否有id参数
if (canvas == null){
return false
}
let context = canvas.getContext("2d")
//参数需要6个，起始位置和圆半径，结束位置和圆半径
context.fillStyle = "#eeeeef"
//绘制图形
context.fillRect(0,0,500,500)
//进行平移
context.translate(200,50)
context.fillStyle ="rgba(255,0,0,0.25)"
for(let i = 0;i<50;i++){
context.translate(25,25)
context.scale(0.95,0.95)
//为什么这里PI要除以10 ，呈现什么效果？
context.rotate(Math.PI/10)
context.fillRect(0,0,100,50)
}
//关闭路径
context.closePath()
//结束绘制
context.fill()
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
Canvas 使用图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制径向渐变图形</title>
<script>
function draw(id){
let canvas = document.getElementById(id)
//检查是否有id参数
if (canvas == null){
return false
}
let context = canvas.getContext("2d")
//参数需要6个，起始位置和圆半径，结束位置和圆半径
let g1 = context.createRadialGradient(400,0,0,400,0,400)
g1.addColorStop(0.1,"rgb(255,255,0)")
g1.addColorStop(0.55,"rgb(255,0,255)")
g1.addColorStop(1,"rgb(0,255,255)")
//将渐变色填充给g1
context.fillStyle = g1
//绘制图形
context.fillRect(0,0,500,500)
//关闭路径
context.closePath()
//结束绘制
context.fill()
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
Canvas 图形组合
<!--Canvas API将一个图形重叠绘制在另一个图形上面，
但图形中能够被看到的部分完全取决与图形的绘制顺序-->
<!--
globalCompositeOperation = type
type:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function draw(id){
let canvas = document.getElementById(id)
//检查是否有id参数
if (canvas == null){
return false
}
let context = canvas.getContext("2d")
let oprtns = new Array(
//图形按照绘制顺序重叠
"cource-atop",
"cource-in",
"cource-out",
"cource-over",
"destination-atop",
"destination-in",
"destination-out",
"destination-over",
//加色处理
"lighter",
"copy",
//重叠部分变透明
"xor"
);
i = 1
context.fillStyle = "blue"
//绘制图形
context.fillRect(10,10,60,60)
//以数组Array里面第八个方式来重叠图片
context.globalCompositeOperation = oprtns[i]
//再绘制一个圆形
context.beginPath()
context.fillStyle="red"
context.arc(60,60,30,Math.PI*2,false)
//关闭路径
context.closePath()
//结束绘制
context.fill()
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
[HTML5 Canvas 给图形绘制阴影]
Stars in the sky
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function draw(id){
//获取Html中的canvas
let canvas = document.getElementById("canvas")
let context = canvas.getContext("2d")
//定义样式
context.fillStyle = "rgb(0,104,139)"
//绘制一个矩形
context.fillRect(0,0,500,500)
//设置阴影与形状的水平距离（x轴方向上）
context.shadowOffsetX = 7
context.shadowOffsetY =7
//设置阴影颜色
context.shadowColor ="rgba(205,133,0,0.5)"
//设置阴影模糊程度
context.shadowBlur = 12
//将画布的x轴，y轴起始点（也就是整个坐标系）向浏览页面y轴方向移动50
context.translate(-10,20)
for(let i= 0;i<3;i++){
context.translate(80,100)
//调用绘制五角星的函数
creatr5Star(context)
//填充当前图像/路径，默认黑色
context.fill()
}
}
//绘制五角星
function creatr5Star(context){
let n= 0,dx=100,dy= 0,s=50
context.beginPath()
//设置五角星的颜色
context.fillStyle = "rgb(255,165,0)"
let x = Math.sin(0)
let y = Math.cos(0)
let dig = Math.PI/5*4
//绘制五角星的五条边
for (let i= 0;i<5;i++){
let x2 = Math.sin(i*dig)
let y2 = Math.cos(i*dig)
//绘制一条终点坐标为dx+x2*s,dy+y2*s的直线
context.lineTo(dx+x2*s,dy+y2*s)
}
//绘制一条从终点（坐标为dx+x2*s,dy+y2*s）到起点的直线
context.closePath()
//结束绘制
context.fill()
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
[HTML5 Canvas 使用图像]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function draw(id){
let canvas = document.getElementById("canvas")
let context = canvas.getContext("2d")
context.fillStyle = "rgb(238,210,238)"
context.fillRect(0,0,500,500)
//实例化Image（）
image = new Image()
image.src = "https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png"
image.onload = function () {
drawImage(context,image)
}
}
//在画布上定位图像，并规定图像的宽度和高度
function drawImage(context,image){
context.drawImage(image,150,190)
}
</script>
</head>
<body onload="draw('canvas')">
<!--
context.drawImage(img,x,y)在画布上定位图像
context.drawImage(img,x,y,w,h)在画布上定位图像，并规定图像的宽度和高度
context.drawImage(img,x,y,sx,sy,sw,sh,dx,dw,dh)剪切图像，并在画布上定位被剪切的部分：
sx ,sy开始剪切的 x,y 坐标位置。
swidth,sheight被剪切图像的宽度,高度。
x,y放置图像的 x ,y坐标位置。
width,height要使用的图像的宽度,高度。
-->
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
