首页 > 其他分享 >Canvas 画三角形 画个脸

Canvas 画三角形 画个脸

时间:2022-10-11 17:36:26浏览次数:52  
标签:200 Canvas ctx 50 画个 三角形 PI 100 Math

1.视图

<canvas id="myCan" width="500px" height="500px" style="border: 1px solid #3e2e40;"></canvas> 2.JS
<script>
  //拿到 当前canvas 画布节点 
  let canvas = document.getElementById('myCan')
  //做出一个判断 判断是否支持 或者说 一个非空判断
  if (canvas.getContext) {
    //拿起画笔 
    let ctx = canvas.getContext('2d');
    //画出第一个正方形
    //ctx.fillStyle  填充的颜色
    ctx.fillStyle = "#59a387";
    //ctx.fillRect  x,y,width,height
    //x 离left的距离  y 离top的距离
    ctx.fillRect(50,50,100,100);

    //再画一个 带有透明的
    ctx.fillStyle="rgba(43, 56, 77, 0.5)";
    ctx.fillRect(70,70,100,100)

    //让我们擦去刚刚画的
    ctx.clearRect(0, 0, 200, 200)

    //开始画出矩形 
    // 还是先画一个正方形
    ctx.fillRect(25, 25, 100, 100);
     // 利用橡皮搽掉中间不需要的部分
    ctx.clearRect(45, 45, 60, 60);
    // 在画一个正方形边框在中心
    ctx.strokeRect(50, 50, 50, 50);

    // 换个地方画试试看
    ctx.fillRect(300,300,100,100)
    ctx.clearRect(310,310,80,80)
    ctx.strokeRect(320,320,60,60)

    //擦去刚刚上面画的
    ctx.clearRect(0, 0, 500, 500)
 
    // 然后来画一个三角形
    // 开启一个路径
    ctx.beginPath()
    //x,y   x 代表离left的距离  y代表离Top的距离 它是移动笔触
    ctx.moveTo(75,50)
    // 创建一条 由

标签:200,Canvas,ctx,50,画个,三角形,PI,100,Math
From: https://www.cnblogs.com/zyzlb/p/16779920.html

相关文章

  • Canvas (画一个矩形)
    1.视图<canvasid="myCan"width="500px"height="500px"style="border:1pxsolid#3e2e40;"></canvas>2.JS<script>//拿到当前canvas画布节点letcanvas......
  • Canvas的 一点点记录
    <!--在试图中创建--><canvasid="myCan"width="500px"height="500px"style="border:1pxsolid#3e2e40;"></canvas>---------------------------<script>......
  • 【动态规划】数字三角形模型
    纯数字三角形模型状态表示:(i,j)表示到达当前位置的最后一步如何,共有两种状态f[i-1][j],f[i][j]状态转移:f[i][j]=max(f[i-1][j-1]+q[i][j],f[i][j......
  • 动态规划,三角形的最大路径和
    三角形的最大路径和#include<string>#include<iostream>#include<cctype>#include<algorithm>#include<vector>#include<unordered_map>#include<cstring>#......
  • 打印三角形及 Debug 操作
    打印三角形//Java-零基础学习/src/process/Demo15packageprocess;​publicclassDemo15{  publicstaticvoidmain(String[]args){    //打印三角形 ......
  • Demo24_打印三角形
    packagecom.HuanXin.JiBen_JieGou_4;publicclassDemo13_SanJiaoXin{publicstaticvoidmain(String[]args){for(inti=1;i<=5;i++){//总for,i相......
  • JS + Canvas 碰撞检测
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content=......
  • 对for循环打印三角形的学习理解
    1.for循环这个嵌套其实就是一个套娃形式,一开始无法理解一列一行的样式怎么呈现,后来想通了,其实代码不管怎么敲,想让它呈现出什么样式,它的本质就是一行一行的去输出,只不过可......
  • canvas
    线条有默认高度和颜色:1px黑色显示为2px非纯黑色原因:线条中线与两个像素中线对齐,各占两个像素的一半,此时会自动填充剩余部分可以通过设置50.5的形式解决线条相关属......
  • 前端利用canvas给图片添加水印
    来源| https://wintc.top/article/27前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能,也是互联网内......