canvas画布

最新推荐文章于 2022-01-27 10:19:14 发布
最新推荐文章于 2022-01-27 10:19:14 发布
阅读量228 收藏
点赞数
分类专栏： JavaScript/HTML5/CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyunping/article/details/52199283
版权
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="background-color:pink;"></canvas>
<img src="08186795f6312a36.jpg" id="photo" width="300px"/>
<input type="button" value="空心矩形" οnclick="juxin()"/>
<input type="button" value="实心矩形" οnclick="juxin2()"/>
<input type="button" value="文字" οnclick="wenzi()"/>
<input type="button" value="清空矩形区域" οnclick="clean()"/>
<input type="button" value="空心文字" οnclick="wenzi2()"/>
<input type="button" value="图片" οnclick="tupian()"/>
<input type="button" value="隐藏图片" οnclick="tupian2()"/>
<input type="button" value="路径" οnclick="tree()"/>
<input type="button" value="闭合路径" οnclick="tree1()"/>
<input type="button" value="扇形" οnclick="yuan()"/>
<div id="d"></div>
<script type="text/javascript">
    function clean(){
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.clearRect(10,10,130,130);
    }
    function yuan(){
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.clearRect(10,10,130,130);
    }


    function juxin(){
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.strokeRect(50,50,180,180);
    }
    function juxin2(){
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.fillStyle='red';
        cxt.fillRect(50,50,100,100);
    }
    function tree1(){
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.beginPath();
        cxt.moveTo(100,100);
        cxt.lineTo(10,10);
        cxt.lineTo(140,20);
        cxt.closePath();
        cxt.stroke();
    }
    function tree(){
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.moveTo(250,220);
        cxt.lineTo(90,70);
       cxt.lineTo(90,10);
        cxt.stroke();
    }
    function wenzi2(){
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.font="60px '楷书'";
        cxt.fillStyle="oorange";
        cxt.strokeText("空心",10,70);
    }


   function wenzi(){
       var c=document.getElementById("myCanvas");
       var cxt=c.getContext("2d");
       cxt.font="36px Arial";
       cxt.fillStyle="blue";
       cxt.fillText("pg32-林云萍",60,90);


   }
    function tupian(){
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        var p=document.getElementById("photo");
        cxt.drawImage(p,190,390,200,140,10,10,150,90);
    }


    function tupian2(){
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        var img =new Image();
        img.src="U10895P693DT20140318153426.jpg";
        cxt.drawImage(img,40,80,80,80,20,20,80,80);
    }
</script>


</body>
</html>
焚膏油以继晷，恒兀兀以穷年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5中Canvas为什么要用getContext('2d')
weixin_33978044的博客
06-15 3052
HTML DOM getContext() 方法 HTML DOM Canvas 对象 定义和用法 getContext() 方法返回一个用于在画布上绘图的环境。 语法 Canvas.getContext(contextID) 参数 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一...
HTML5 <canvas>
烟汐忆梦
01-03 527
HTML5   HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形
canvas 基本使用
qq_37550440的博客
01-27 2205
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas dem.
canvas基本操作
丰空岛主(Vega Prime,Android,LabWindows,ThreeJS,Python,OpenCV）
12-16 1800
创建一个画布（Canvas） 一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制. 注意:默认情况下 <canvas> 元素没有边框和内容。 <canvas>简单实例如下: <canvas id="myCanvas" width="200" height="100"></canvas> 注意:标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小. 提示:你可以在HTML..
40 个重要的 HTML5 面试问题及答案
奋斗的蜗牛
12-29 2499
本文将列出40个重要的HTML 5面试问题及答案，祝各位求职顺利。 目录 介绍Canvas和SVG图形之间的区别是什么？如何使用Canvas和SVG绘制矩形？什么是CSS选择器？如何使用ID值应用CSS样式？CSS的列布局有什么用？请解释一下CSS盒子模型？请解释CSS 3中的一些文字效果？什么是web worker，为什么我们需要他们web worker？如何添加和删除本地存储中
Canvas使用错误：screen.getContext('2d') is not a function
陈小峰（iefreer）的专栏
10-11 2万+
getContext是用来获取画布上下文的，如果出现not a function错误，一般是由于获取Canvas元素的方法不正确引起的。在某些浏览器中，变量和类命名也会导致奇怪的问题，注意尽量不用使用screen/canvas来作为元素的类名或JS中的变量名，以免和特定浏览器的默认定义冲突。本例出现的错误代码实例在：http://wow.techbrood.com/fiddle/11770解决方法
微信小程序canvas画布实现画笔自由绘制
最新发布
01-09
在微信小程序中，canvas画布是一个非常重要的组件，它允许开发者进行丰富的图形操作，包括自由绘制功能。这个功能常用于创建涂鸦应用、手写笔记、图像编辑等场景。本篇将详细介绍如何利用微信小程序的canvas API来...
Canvas画布全屏雪花背景特效特效代码
03-20
Canvas画布是HTML5引入的一种强大的图形绘制工具，它允许开发者通过JavaScript在网页上进行动态图形编程，实现各种丰富的视觉效果。在这个特定的场景中，我们讨论的是如何使用Canvas实现全屏雪花背景特效。这个特效...
Canvas画布彩色粒子发散特效特效代码
03-20
在这个“Canvas画布彩色粒子发散特效”中，我们主要探讨的是如何利用Canvas API来实现一个生动有趣的视觉效果：彩色粒子从中心点向外发散的动画。 首先，我们需要在HTML页面上创建一个`<canvas>`元素，然后通过...
Canvas画布线条组合动画特效特效代码
03-20
这个“Canvas画布线条组合动画特效特效代码”是利用Canvas API创建的2D彩色线条花环几何体动画，用于增强网页的视觉效果和用户体验。下面我们将深入探讨Canvas画布以及如何实现这种线条动画特效。 首先，Canvas API...
canvas拼图游戏,基于html + canvas画布实现
03-18
canvas拼图游戏,基于html + canvas画布实现
canvas中的getContext()方法 以及 webgl中的getContext()方法
acoolgiser的博客
01-04 3万+
一、getContext()方法 翻译自：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext 语法：canvas.getContext(contextType, contextAttributes); var ctx = canvas.getContext（contextType）; v...
canvas中2D画线详解
qq_24967663的博客
03-22 4183
一、w3c里面的代码和实现效果     手册的代码是这样的 var c = document.getElementById('myCanvas'); var cxt = c.getContext("2d"); cxt.moveTo(10, 10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke();      实现的
html5 标签与对应属性详细使用方法
Successione di Fibonacci
06-23 1327
HTML 5 视频 video标签 当前，video 元素支持三种视频格式： Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
html5清空画布方法
热门推荐
05-27 4万+
总结以下三种清空canvas画布的方式： 1. 最简单的方法：由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空： function clearCanvas() { var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); c.height=c.heig
HTML5 学习（二 CANVAS 的基本操作 【JavaScript绘制】）
lzq1039602600的专栏
02-04 570
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 1、绘制路径 varc=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); c
Html5 Canvas绘图实例
绳锯木断，水滴石穿，专心写文，无问西东！！！
09-14 3906
前些年的时候，突然对Canvas感兴趣，利用空闲时间做一些Canvas小例子进行练习，仅供学习分享使用。如有不足之处，还请指正。 什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素及JavaScript对象 向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度，如下所示： <can
html 用函数画圆,JavaScript在网页中画圆的函数arc使用方法
weixin_42509569的博客
06-25 1135
一、arc所需要的参数设置arc(x, y, radius, startAngle, endAngle, counterclockwise);其中x,y,radius都很容易理解，那么重点说说startAngle,endAngle和counterclockwise三个参数！二、arc参数详解1，startAngle和endAngle分别指圆开始的角度和结束的角度，手册上面说的是开始的角度为0，结束...
多个canvas画布合并
06-09
要将多个canvas画布合并成一个画布，可以使用以下步骤： 1. 创建一个新的canvas画布，作为最终合并后的画布。 2. 获取每个要合并的canvas画布的像素数据。 3. 将每个canvas画布的像素数据绘制到新的canvas画布上。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值