【JavaScript】Canvas绘图整理
2024-05-10 15:06:34
文章目录
- 绘制矩形
- 点线模式
- 绘制艺术字
- 绘制圆形路径
- 绘制圆角矩形
- 绘制凹多边形
- 绘制曲线
- 绘制位图
- 绘制坐标变换
- 绘制坐标变换与路径结合
- 绘制矩阵变换
- 绘制叠加效果
- 绘制线性渐变和径向渐变
- 位图填充
- 位图剪裁
- 改变位图透明度
- 输出位图
- 基于定时器的动画
- 基于requestAnimationFrame的动画
绘制矩形
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 绘制矩形 </title>
</head>
<body><canvas id="mc" width="300" height="200" style="border:1px solid black"></canvas><script type="text/javascript">// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');// 设置填充颜色ctx.fillStyle = '#f84d4f';// 绘制矩形ctx.fillRect(50 , 50 , 200 , 100);</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 绘制矩形 </title>
</head>
<body><canvas id="mc" width="400" height="350" style="border:1px solid black"></canvas><script type="text/javascript">// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');// 设置填充颜色ctx.fillStyle = '#f74d00';// 填充一个矩形ctx.fillRect(30 , 20 , 120 , 60);// 设置填充颜色ctx.fillStyle = '#ff9700';// 填充一个矩形ctx.fillRect(80 , 60 , 120 , 60);// 设置填充颜色ctx.fillStyle = '#daee00';// 填充一个矩形ctx.fillRect(130 , 90 , 120 , 60);// 设置线条颜色ctx.strokeStyle = "#b203ff";// 设置线条宽度ctx.lineWidth = 10;// 绘制一个矩形边框ctx.strokeRect(30 , 200 , 120 , 60);// 设置线条颜色ctx.strokeStyle = "#19b8ff";// 设置线条连接风格ctx.lineJoin = "round";// 绘制一个矩形边框ctx.strokeRect(80 , 230 , 120 , 60);// 设置线条颜色ctx.strokeStyle = "#51f100";// 设置线条连接风格ctx.lineJoin = "bevel";// 绘制一个矩形边框ctx.strokeRect(130 , 260 , 120 , 60);</script>
</body>
</html>
点线模式
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 点线模式 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.center {text-align:center}</style>
</head>
<body><canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas><div class="center"><p><b>选择点线模式：</b></p><select id="lineDash" class="center" onchange="changeLineDash(this.value);"></select><p><b>选择点线相位：</b></p><input type="range" id="lineDashOffset" style="width:300px" onchange="changeLineDashOffset(this.value);"/></div><script type="text/javascript">// 定义一个数组来代表所有点线模式var lineDashArr = [[2, 2], [2.0, 4.0, 2.0], [2.0, 4.0, 6.0], [2.0, 4.0, 2.0, 6.0],[2.0, 2.0, 4.0, 4.0], [2.0, 2.0, 4.0, 6.0, 10.0]];var phaseMax = 20;var phaseMin = -20;// 初始化界面上lineDash元素var lineDashEle = document.getElementById("lineDash");for (var i = 0; i < lineDashArr.length; i++) {lineDashEle.options[i] = new Option(lineDashArr[i], i);}lineDashEle.options[0].selected = true;// 初始化界面上lineDashOffset元素var lineDashOffsetEle = document.getElementById("lineDashOffset");lineDashOffsetEle.max = phaseMax;lineDashOffsetEle.min = phaseMin;lineDashOffsetEle.step = 0.1;lineDashOffsetEle.value = 0;// lineDash变量保存绘图的点线模式var lineDash = lineDashArr[0];// lineDashOffset变量保存绘图的点线相位var lineDashOffset = 0;function draw() {// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');ctx.fillStyle = "#ffffff";ctx.fillRect(0, 0, 400, 280);// 设置线条颜色ctx.strokeStyle = "#0060bf";// 设置线条宽度ctx.lineWidth = 3;// 设置点线模式ctx.setLineDash(lineDash);// 设置点线模式的相位ctx.lineDashOffset = lineDashOffset;// 绘制一个矩形边框ctx.strokeRect(40 , 60 , 120 , 120);ctx.beginPath();// 添加一个圆ctx.arc(300, 120, 60, 60, 0, Math.PI * 2, true);// 添加一条直线ctx.moveTo(30 , 30);ctx.lineTo(360 , 30);// 再添加一条直线ctx.moveTo(200 , 50);ctx.lineTo(200 , 240);ctx.closePath();ctx.stroke();}function changeLineDash(i) {lineDash = lineDashArr[i];draw();}function changeLineDashOffset(val) {lineDashOffset = val;draw();}draw();</script>
</body>
</html>
绘制艺术字
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 绘制艺术字 </title>
</head>
<body><canvas id="mc" width="1050" height="130" style="border:1px solid black"></canvas><script type="text/javascript">// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');ctx.fillStyle = '#b26aff';ctx.font = 'italic bold 25px 楷体';ctx.textBaseline = 'top';// 填充字符串ctx.fillText('德玛西亚是一个实力雄厚、奉公守法的国家，有着功勋卓著的光荣军史。', 0, 0);ctx.strokeStyle = '#ffaf03';ctx.font='bold 30px 仿宋';// 绘制字符串的边框ctx.strokeText('这里非常重视正义、荣耀、职责的意识形态，这里的人民为此感到强烈自豪。', 0, 50);ctx.fillStyle = '#00a802';ctx.font='20px 隶书';ctx.textBaseline = 'bottom';ctx.fillText('德玛西亚是一个自给自足的农耕社会，肥沃的耕地、大片未砍伐的森林、以及矿产储量丰富的山脉遍及全境。', 10, 130);</script>
</body>
</html>
绘制圆形路径
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 绘制圆形路径 </title>
</head>
<body><canvas id="mc" width="350" height="350" style="border:1px solid black"></canvas><script type="text/javascript">// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');for (var i = 0; i < 10; i++) {// 开始定义路径ctx.beginPath();// 添加一段圆弧ctx.arc(30+i*25, 30 + i*25 , (i+1)*8, 0, Math.PI*2, true);// 关闭路径ctx.closePath();// 设置填充颜色ctx.fillStyle = 'rgba(255 , 0 , 0 , ' + (10-i)*0.1 + ')';// 填充当前路径。ctx.fill();}</script>
</body>
</html>
绘制圆角矩形
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 绘制圆角矩形 </title>
</head>
<body><canvas id="mc" width="500" height="300" style="border:1px solid black"></canvas><script type="text/javascript">/* * 该方法负责绘制圆角矩形* x1、y2：是圆角矩形左上角的坐标* width、height：控制圆角举行的宽、高* radius：控制圆角矩形的四个圆角的半径*/function createRoundRect(ctx, x1, y1, width, height, radius) {ctx.beginPath();// 移动到左上角ctx.moveTo(x1+radius, y1);// 添加一条连接到右上角的线段ctx.lineTo(x1+width-radius, y1);// 添加一段圆弧ctx.arcTo(x1+width, y1, x1+width, y1+radius, radius);// 添加一条连接到右下角的线段ctx.lineTo(x1+width, y1+height-radius);// 添加一段圆弧ctx.arcTo(x1+width, y1+height, x1+ width-radius, y1+height, radius);// 添加一条连接到左下角的线段ctx.lineTo(x1+radius, y1+height);// 添加一段圆弧ctx.arcTo(x1, y1+height, x1, y1+height-radius, radius);// 添加一条连接到左上角的线段ctx.lineTo(x1, y1+radius);// 添加一段圆弧ctx.arcTo(x1, y1, x1+radius, y1, radius);ctx.closePath();}// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');ctx.lineWidth = 5;ctx.strokeStyle = '#0074f1';createRoundRect(ctx, 50, 50, 400, 200, 20);ctx.stroke();</script>
</body>
</html>
绘制凹多边形
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 绘制凹多边形 </title>
</head>
<body><canvas id="mc" width="460" height="280" style="border:1px solid black"></canvas><script type="text/javascript">/** 该方法负责绘制凹多边形* n：该参数应设为奇数，控制绘制N角星* dx、dy：控制N角星的位置* size：控制N角星的大小*/function createStar(context, n, dx, dy, size) {// 开始创建路径context.beginPath();var dig = Math.PI/n*4;context.moveTo(dx, size+dy);for (var i = 0; i <= n; i++) {var x = Math.sin(i*dig);var y = Math.cos(i*dig);context.lineTo(x*size+dx, y*size+dy);}context.closePath();}// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');// 绘制凹三边形createStar(ctx, 3, 80, 60, 50);ctx.fillStyle = "#ff310e";ctx.fill();// 绘制凹五边形createStar(ctx, 5, 180, 60, 50);ctx.fillStyle = "#ffb216";ctx.fill();// 绘制凹七边形createStar(ctx, 7, 280, 60, 50);ctx.fillStyle = "#fff92d";ctx.fill();// 绘制凹九边形createStar(ctx, 9, 380, 60, 50);ctx.fillStyle = "#e4ff19";ctx.fill();// 绘制凹十一边形createStar(ctx, 11, 80, 200, 50);ctx.fillStyle = "#55cd00";ctx.fill();// 绘制凹十三边形createStar(ctx, 13, 180, 200, 50);ctx.fillStyle = "#00eb91";ctx.fill();// 绘制凹十五边形createStar(ctx, 15, 280, 200, 50);ctx.fillStyle = "#14d9ff";ctx.fill();// 绘制凹十七边形createStar(ctx, 17, 380, 200, 50);ctx.fillStyle = "#ab49ff";ctx.fill();</script>
</body>
</html>
绘制曲线
- 《绘制二次贝塞尔曲线》
- 《绘制贝塞尔曲线》
绘制位图
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 绘制位图 </title>
</head>
<body><canvas id="mc" width="1250" height="700" style="border:1px solid black"></canvas><script type="text/javascript">// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');// 创建Image对象var image = new Image();// 指定Image对象装载图片image.src = "cat.jpg";// 当图片装载完成时激发该函数image.onload = function() {// 保持原大小绘制图片ctx.drawImage(image, 20, 10);// 绘制图片时进行缩放ctx.drawImage(image, 700, 10, 100, 100);var sw = 210;var sh = 150;// 从源位图中挖取一块并放大2倍后绘制在Canvas上ctx.drawImage(image, 210, 100, sw, sh, 800, 300, sw*2, sh*2);sw = 210;sh = 200;// 从源位图中挖取一块直接绘制在Canvas上ctx.drawImage(image, 210, 100, sw, sh, 900, 10, sw, sh);}</script>
</body>
</html>
绘制坐标变换
- 绘制网螺旋旋转图形
绘制坐标变换与路径结合
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 绘制雪花飘飘 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><canvas id="mc" width="520" height="280" style="border:1px solid black"></canvas><script type="text/javascript">function createFlower(context, n, dx, dy, size, length) {// 开始创建路径context.beginPath();context.moveTo(dx, dy+size);var dig = 2*Math.PI/n;for(var i = 1; i < n+1; i++) {// 结算控制点坐标var ctrlX = Math.sin((i-0.5)*dig)*length+dx;var ctrlY= Math.cos((i-0.5)*dig)*length+dy;// 结算结束点的坐标var x = Math.sin(i*dig)*size+dx;var y = Math.cos(i*dig)*size+dy;// 绘制二次曲线context.quadraticCurveTo(ctrlX, ctrlY, x, y);}context.closePath();}// 定义每个雪花的初始位置snowPos = [{x : 20, y : 4},{x : 60, y : 4},{x : 100, y : 4},{x : 140, y : 4},{x : 180, y : 4},{x : 220, y : 4},{x : 260, y : 4},{x : 300, y : 4},{x : 340, y : 4},{x : 380, y : 4},{x : 420, y : 4},{x : 460, y : 4},{x : 500, y : 4}];function fall(context) {// 设置采用浅蓝色作为背景填充色context.fillStyle = "#2a82ff";// 填充矩形context.fillRect(0, 0, 520, 280);// 设置采用白色作为填充色context.fillStyle = "#ffffff";for (var i = 0, len = snowPos.length; i < len; i++) {// 保存当前绘图状态context.save();// 平移坐标系统评context.translate(snowPos[i].x, snowPos[i].y);// 旋转坐标系统context.rotate((Math.random()*6-3)*Math.PI/10);// 控制雪花下落snowPos[i].y += Math.random()*8;if (snowPos[i].y > 280) {snowPos[i].y = 4;}// 创建并绘制雪花createFlower(context, 6, 0, 0, 5, 8);context.fill();// 恢复绘图状态context.restore();}}// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');setInterval("fall(ctx);" , 200);</script>
</body>
</html>
绘制矩阵变换
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 倾斜变换 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><canvas id="mc" width="600" height="360" style="border:1px solid black"></canvas><script type="text/javascript">function tran(context, angle) {// 借助于transform方法实现倾斜变换context.transform(1, 0, -Math.tan(angle), 1, 0, 0);}// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');ctx.fillStyle = "rgba(100, 50, 180, 0.3)";// 坐标系统平移到360、5位置ctx.translate(360, 5);for(var i = 0; i < 30; i++) {// 平移坐标系统ctx.translate(50, 30);// 缩放坐标系统ctx.scale(0.93, 0.93);// 倾斜变换tran(ctx, Math.PI/10);ctx.fillRect(0, 0, 150, 75);}</script>
</body>
</html>
绘制叠加效果
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 叠加风格 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body>选择叠加风格：<select style="width:160px" onchange="draw(this.value);"><!--新绘制的图形将会显示在顶层，覆盖以前绘制的图形--><option value="source-over">source-over</option><!--只显示新图形与原图形重叠的部分，新图形与原图形的其他部分都变成透明的--><option value="source-in">source-in</option><!--只显示新图形与原图形不重叠的部分，新图形与原图形的其他部分都变成透明的--><option value="source-out">source-out</option><!--只绘制新图形与原图形重叠部分和原图形未被覆盖的部分，新图形的其他部分变成透明的--><option value="source-atop">source-atop</option><!--新绘制的图形将放在原图形的后面--><option value="destination-over">destination-over</option><!--只显示原图形与新图形重叠的部分，新图形与原图形的其他部分都变成透明的--><option value="destination-in">destination-in</option><!--只显示原图形与新图形不重叠的部分，新图形与原图形的其他部分都变成透明的--><option value="destination-out">destination-out</option><!--只绘制原图形与新图形重叠部分和新图形未被覆盖的部分，原图形的其他部分变成透明的，不绘制新图形的重叠部分--><option value="destination-atop">destination-atop</option><!--新图形和原图形都绘制，重叠部分绘制两种颜色相加的颜色--><option value="lighter">lighter</option><!--绘制新图形与原图形不重叠的部分，重叠部分变成透明的--><option value="xor">xor</option><!--只绘制新图形，原图形变成透明的--><option value="copy">copy</option></select><br/><br/><canvas id="mc" width="400" height="200" style="border:1px solid black"></canvas><script type="text/javascript">var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');var draw = function(compositeOper) {// 保存当前的绘图状态ctx.save();// 获取canvas元素对应的DOM对象ctx.clearRect(0, 0, 400, 200);// 设置填充颜色为红色ctx.fillStyle = '#ff0000';// 填充一个矩形ctx.fillRect(30, 20, 160, 100);// 设置图形叠加风格ctx.globalCompositeOperation = compositeOper// 设置填充颜色为绿色ctx.fillStyle = '#00ff00';// 填充一个矩形ctx.fillRect(120, 60, 160, 100);// 恢复之前保存的绘图状态ctx.restore();}draw("source-over");</script>
</body>
</html>
绘制线性渐变和径向渐变
- 绘制线性渐变和径向渐变
位图填充
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 位图填充 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><canvas id="mc" width="450" height="330" style="border:1px solid black"></canvas><script type="text/javascript">// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');ctx.save();ctx.translate(30, 20);var image = new Image();image.src = "rocket_flat.png";image.onload = function() {// 创建位图填充imgPattern = ctx.createPattern(image, "repeat");// 设置使用位图填充作为填充颜色ctx.fillStyle = imgPattern;// 填充一个矩形ctx.fillRect(0, 0, 180, 90);// 恢复坐标系统ctx.restore();// 平移坐标系统ctx.translate(300, 200)ctx.beginPath();// 添加圆弧ctx.arc(0, 0, 100, 0, Math.PI*2 , true);ctx.closePath();ctx.lineWidth = 30;// 设置使用位图填充作为边框颜色ctx.strokeStyle = imgPattern;ctx.stroke();}</script>
</body>
</html>
位图剪裁
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 位图裁剪 </title>
</head>
<body><canvas id="mc" width="1240" height="632" style="border:1px solid black"></canvas><script type="text/javascript">// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');var dig = Math.PI / 20 ;var count = 0;var image = new Image();image.src = "cat.jpg";image.onload = function() {// 指定每隔0.1秒调用一次addRadial函数setInterval("addRadial();" , 100);}var addRadial = function() {// 保存当前的绘图状态ctx.save();// 开始创建路径ctx.beginPath();// 添加一段圆弧ctx.arc(600, 250, 200, 0, dig*++count, false);// 让圆弧连接到圆心ctx.lineTo(300, 300);// 关闭路径ctx.closePath();// 剪切路径ctx.clip();// 此时绘制的图片只有路径覆盖的部分才会显示出来ctx.drawImage(image, 124, 20);ctx.restore();}</script>
</body>
</html>
改变位图透明度
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 位图改变透明度 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><canvas id="mc" width="250" height="250" style="border:1px solid black"></canvas><script type="text/javascript">// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');var image = new Image();image.src = "rocket_flat.png";image.onload = function() {// 用带透明度参数的方法绘制图片drawImage(image, 25, 25, 0.4);var drawImage = function(image, x, y, alpha) {// 绘制图片ctx.drawImage(image, x, y);// 获取从x、y开始，宽为image.width、高为image.height的图片数据// 也就是获取绘制的图片数据var imgData = ctx.getImageData(x, y, image.width, image.height);for (var i = 0, len = imgData.data.length; i < len; i += 4) {// 改变每个像素的透明度imgData.data[i+3] = imgData.data[i+3] * alpha;}// 将获取的图片数据放回去。ctx.putImageData(imgData, x, y);}</script>
</body>
</html>
输出位图
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 位图输出 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><canvas id="mc" width="380" height="350" style="border:1px solid black"></canvas><img id="result" src="" alt="output" crossOrigin="Anonymous"/><script type="text/javascript">var canvas = document.getElementById('mc');var context = canvas.getContext('2d');context.fillStyle = "#ffffff";context.fillRect(0, 0, 380, 350);context.translate(200, 50);context.fillStyle = 'rgba(255, 0, 0, 0.25)';for (var i = 0; i < 50; i++) {context.translate(25, 25);context.scale(0.95, 0.95);context.rotate(Math.PI/10);context.fillRect(0, 0, 100, 50);}// 使用img元素来显示Canvas的输出结果document.getElementById("result").src = canvas.toDataURL("image/png");</script>
</body>
</html>
基于定时器的动画
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 基于定时器的简单动画 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><canvas id="mc" width="380" height="320" style="border:1px solid black"></canvas><script type="text/javascript">// 通过prototype为CanvasRenderingContext2D类增加一个方法CanvasRenderingContext2D.prototype.fillCircle = function(x, y, radius, pattern) {ctx.save();ctx.translate(x, y);ctx.fillStyle = pattern;ctx.beginPath();// 添加圆弧ctx.arc(0, 0, radius, 0, Math.PI * 2, true);ctx.closePath();ctx.fill()ctx.restore();}// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');var radius = 15;var rg = ctx.createRadialGradient(-radius/2, -radius/2, 0, -radius/2, -radius/2, radius*1.67);// 向径向渐变上添加颜色rg.addColorStop(0.1 , "#f0f0f0");rg.addColorStop(0.9 , "#000111");var x = canvas.width/2;var y = 20;var xSpeed = Math.random()*11-5;var ySpeed = Math.random()*5+2;function draw() {ctx.fillStyle = "#ffffff";// 清除上一次绘制的内容ctx.clearRect(x-radius-2, y-radius-2, x+xSpeed+radius+2, y+ySpeed+radius+2);x += xSpeed;y += ySpeed;// 绘制圆形ctx.fillCircle(x, y, 15, rg);// 如果小球到了左边界或右边界，发生碰撞返回if(x <= radius || x >= canvas.width-radius) {xSpeed = -xSpeed;}// 如果小球到了上边界或下边界，发生碰撞返回if(y <= radius || y > canvas.height-radius) {ySpeed = -ySpeed;}}// 使用定时器控制每隔30ms执行一次draw函数setInterval(draw , 30);</script>
</body>
</html>
基于requestAnimationFrame的动画
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 简单弹球动画 </title><style media="screen">body {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><canvas id="mc" width="380" height="320" style="border:1px solid black"></canvas><script type="text/javascript">// 通过prototype为CanvasRenderingContext2D类增加一个方法CanvasRenderingContext2D.prototype.fillCircle = function(x, y, radius, pattern) {ctx.save();ctx.translate(x, y);ctx.fillStyle = pattern;ctx.beginPath();// 添加圆弧ctx.arc(0, 0, radius, 0, Math.PI*2, true);ctx.closePath();ctx.fill()ctx.restore();}// 获取canvas元素对应的DOM对象var canvas = document.getElementById('mc');// 获取在canvas上绘图的CanvasRenderingContext2D对象var ctx = canvas.getContext('2d');var radius = 15;var rg = ctx.createRadialGradient(-radius/2, -radius/2, 0, -radius/2, -radius/2, radius * 1.67);// 向径向渐变上添加颜色rg.addColorStop(0.1 , "#f0f0f0");rg.addColorStop(0.9 , "#000111");var x = canvas.width/2;var y = 20;var xSpeed = Math.random()*11-5;var ySpeed = Math.random()*5+2;function draw() {ctx.fillStyle = "#ffffff";// 清除上一次绘制的内容ctx.clearRect(x-radius-2, y-radius-2, x+xSpeed+radius+2, y+ySpeed+radius+2);x += xSpeed;y += ySpeed;// 绘制圆形ctx.fillCircle(x, y, 15, rg);// 如果小球到了左边界或右边界，发生碰撞返回if(x <= radius || x >= canvas.width-radius) {xSpeed = -xSpeed;}// 如果小球到了上边界或下边界，发生碰撞返回if(y <= radius || y > canvas.height-radius) {ySpeed = -ySpeed;}}function anim() {requestAnimationFrame(function() {draw();anim();});};anim();</script>
</body>
</html>
【JavaScript】Canvas绘图整理相关推荐
- 每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript 使用Canvas绘图
JavaScript 使用Canvas绘图 <canvas>元素负责在页面中设定一个区域,可以通过JavaScript动态地在这区域中绘制图形. 一.基本用法 1.先设置width和he ...
- JavaScript：使用Canvas绘图
1.基本用法 要使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小,出现在开始后结束标签中的内容是后备信息,如果浏览器不支持<canvas ...
- 如何使用canvas绘图
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用can ...
- Android中Canvas绘图之Shader使用图文详解
概述 我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什 ...
- H5 canvas 绘图
H5的canvas绘图技术 canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种 ...
- Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报 如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
- [转]基于Prototype，利用Canvas绘图实现的web流程图设计器（原型）
基于Prototype,利用Canvas绘图实现的web流程图设计器(原型) 关键字: javascript prototype script.aculo.us canvas 流程图 web画线 刚才 ...
- canvas技术整理
canvas技术整理 1 html 2 <canvas id= "canvas"></canvas> 3 4 javascript 5 var canvas ...
最新文章
- 【leetcode】86. Partition List
- POJ 2231 Moo Volume（递推、前缀和）
- Java黑皮书课后题第2章：*2.23（驾驶费用）编写一个程序，提示用户输入驾驶的距离、每加仑多少英里的汽车燃油性能值，以及每加仑的价格，然后显示旅程的费用
- 【Java学习笔记七】常用数据对象之数组
- mongoose populate 返回 指定 字段
- 快领！了不起的程序员专属红包封面！！
- 【Python】【Python语言】Python3.7.2的关键字与保留字
- linux绑定硬件的软件吗,Linux下安装的硬件方法
- 第九集（第二部分）思科路由器IOS升级过程视频记录
- c#DataGridView响应键盘事件
- python做购物系统的实训报告_网上购物系统实训总结
- MagicDraw二次开发过程
- C51单片机-蓝牙遥控小车
- SpringBoot2.x 集成 腾讯云短信
- MD5校验判断文件是否一样
- 构建知识体系(3)：建立体系6个步骤
- Qt 模型视图编程之表头设置
- linux用vi使一个段落对齐,12.8 Linux下vi命令和shell学习
- cloudera/quickstart
- pixhawk 学习笔记