canvas
关注
分享
扫一扫
码林鼠
致力于知识的传播
展开
-
svg弧线文本弧形文字
先看效果 上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> *{ padding:0; margin:0; } text { font-size: 30px;原创 2022-05-22 13:43:00 · 942 阅读 · 0 评论 -
canvas过度动画
let canvas = document.querySelector('canvas') let ctx = canvas.getContext('2d'); let w = ctx.canvas.width let h = ctx.canvas.scrollHeight let angle = 0 ctx.translate(150,150)/...原创 2020-03-16 11:40:32 · 1460 阅读 · 0 评论 -
canvas上画图片
let image = new Image(); image.onload = function(){//先注册onload监听，防止图片加载完后还没有注册onload，那就获取不到图片 ctx.drawImage(image,100,100)//(image,画布坐标x,y) //ctx.drawImage(image,100,100,100,100)//(image,画布坐标x,...原创 2020-03-16 11:30:08 · 250 阅读 · 0 评论 -
canvas基础
ctx.lineWidth=20; // ctx.lineJoin = 'round'; ctx.lineJoin = 'bevel';//拐点 ctx.lineCap ='round'//两端 ctx.moveTo(100,100); ctx.lineTo(150,50); ctx.lineTo(200,100); ctx.stroke(...原创 2020-03-16 11:22:36 · 135 阅读 · 0 评论 -
stroke beginPath三条平行线canvas
<template> <div class="contain"> <canvas width="600" height="400"></canvas> </div> </template> <script> export default { mounted(){ let canvas ...原创 2020-03-16 10:24:05 · 198 阅读 · 0 评论 -
非零环绕
<template> <div class="contain"> <canvas width="600" height="400"></canvas> </div> </template> <script> export default { mounted(){ let canvas...原创 2020-03-16 10:13:43 · 183 阅读 · 0 评论