锦方的个人网页 · 如果有一天你突然想起了我

HTML Canvas

约 10 分钟 #note #html #web
目录

Canvas

绘制一个画布:

<canvas id="Canvas1" width="200" height="100" class="legacy-canvas-border">

在画布中创建线条:

<script>
var canvas = document.getElementById("Canvas1");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
//定义直线的起点
ctx.lineTo(200,100);
//定义直线的终点
ctx.stroke();
//绘制直线
ctx.beginPath();
//开始一个路径
ctx.arc(95,50,50,0,2*Math.PI);
/*arc（x，y，r，startangle，endangle）
 创建弧/曲线。使用arc（）创建圆：
 将起始角度设置为0，将结束角度设置为2 * Math.PI。
 x和y参数定义圆心的x坐标和y坐标。r参数定义圆的半径。*/
ctx.stroke();
//绘制圆
ctx.beginPath();
ctx.arc(150,50,50,0,2*Math.PI);
ctx.stroke();
</script>

文本:

<script>
var canvas = document.getElementById("Canvas2");
var ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
//定义文本字体属性
ctx.fillStyle = "#50a006";
//文本颜色
ctx.textAlign = "center";
//文本对齐方式
ctx.fillText("你好", canvas.width/2, canvas.height/2); 
//fillText（text，x，y） - 在画布上绘制“填充”文本
ctx.strokeText("Hello",55,70);
//strokeText（text，x，y）在画布上绘制文本
</script>

图像:

<canvas id="Canvas3" width="100" height="100" class="legacy-canvas-border">
<img id="scream" width="90" height="90"
src="/images/loge.jpg" alt="The Scream">
<script>
window.onload = function() {
    var canvas = document.getElementById("Canvas3");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0);
};
</script>
The Scream

渐变色卡:

<canvas id="Canvas4" width="350" height="50" class="legacy-canvas-border">
<script>
var c=document.getElementById("Canvas4");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,350,0);
createLinearGradient（x，y，x1，y1）创建一个线性渐变
grd.addColorStop(0,"red");
//中心颜色
grd.addColorStop(1,"white");
//边缘颜色
ctx.fillStyle=grd;
ctx.fillRect(0,0,350,50);
//色卡区域
var grd=ctx.createRadialGradient(25,25,5,25,25,25);
createRadialGradient（x，y，r，x1，y1，r1）创建一个径向/圆形渐变
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect(0,0,50,50);
</script>

系列：note

该系列自动来自分类： note

  1. macOS 外置硬盘为什么会出现 ._* 文件
  2. 小众工具软件应该免费、买断还是订阅
  3. 用iPhone和iPad维护Git静态网站可行吗
  4. 一个Mac截图工具，从能截图到能上架还差多远
  5. 重复文件清理工具最危险的不是漏扫，而是误删
  6. 备份dokuwiki数据
  7. grep 命令
  8. zola的Front Matter完整字段的意思
  9. 从dokuwiki切换到quartz
  10. 安装immich记录
  11. 修改dokuwiki时区
  12. macos安装dokuwiki
  13. Debian创建新用户和设置防火墙
  14. mac在Debian安装wireguard和使用
  15. 再也不买不能解bl的手机了
  16. Firefox设置
  17. debian安装FFmpeg来合并youtube音频
  18. css 扩散列表
  19. 两个练习
  20. css RWD
  21. css 图片
  22. css 提示
  23. css 下拉
  24. css 表单
  25. css 导航栏
  26. css 单词
  27. HTML SVG
  28. HTML Canvas (当前)
  29. HTML input
  30. HTML 结构
  31. 电气施工图说明
  32. china uses dropbox
  33. Nginx installs SSL certificates
  34. debian install shadowsocks
  35. Visual studio code set the python environment
  36. install hexo

下一篇推荐

系列继续阅读

HTML input

相关文章