HTML5>canvas基本使用

最新推荐文章于 2022-11-09 11:46:36 发布
最新推荐文章于 2022-11-09 11:46:36 发布
阅读量432 收藏
点赞数
分类专栏： 前端 文章标签： HTML5 CANVAS 使用 画布图片转换

 

<!DOCTYPE html> 


<html>


<head>


<!--网页的编码的格式为 utf-8 -->


<meta charset="utf-8"/>


</head>


<body>


<!--建立一个画布，申明画布的大小，边框，颜色等-->


<canvas id="can1" width="500px" height="400px" style="border: 1px solid red">


</canvas>


<script type="text/javascript">


//1:得到画布


var canvasl= document.getElementById("can1");


//2:画笔
alert(canvasl)


var cxt=canvasl.getContext("2d");
alert(cxt)
//画出直线


cxt.moveTo(20,20);


cxt.lineTo(20,90);


cxt.stroke();


//画出一个填充的三角形--路径


cxt.fillStyle="#FF0000";//设置颜色


//开始新路径


cxt.beginPath();


cxt.moveTo(40,20);


cxt.lineTo(40,90);


cxt.lineTo(80,90);


cxt.closePath();//闭合路径


cxt.fill();//fill代表的是填充


//画出一个三角形


cxt.beginPath();


cxt.moveTo(90,20);


cxt.lineTo(90,90);


cxt.lineTo(130,90);


cxt.closePath();//闭合路径


cxt.stroke();


//画出矩形()


cxt.strokeRect(140,20,70,70);


//填充矩形


//改变填充颜色，修改画笔的fillStyle


cxt.fillStyle="#00FF00";


cxt.fillRect(230,20,70,70);


//画出圆形


//6个参数的设置


cxt.beginPath();


cxt.arc(350,60,35,-10,380,true);


cxt.closePath();


cxt.stroke();


//画出填充的圆形


cxt.fillStyle="#FF0000";


cxt.beginPath();


cxt.arc(430,60,35,-10,380,true);


cxt.closePath();


cxt.fill();


//1:创建一个image对象


var img1=new Image();


//2:指定图片地址


img1.src="../two.jpg";


img1.οnlοad=function(){//加载完毕以后，在绘制图片


cxt.drawImage(img1,20,100,200,150);


}


var text="好高好高";


//设置字体的大小


cxt.fillStyle="#FF0000";


cxt.font="20px";


cxt.fillText(text,250,100);


//canvas将图片转换为画图
function convertImageToCanvas(image) {  
    var canvas = document.createElement("canvas");  
    canvas.width = image.width;  
    canvas.height = image.height;  
    canvas.getContext("2d").drawImage(image, 0, 0);  
  
    return canvas;  
}  


//画图转换为图片
function convertCanvasToImage(canvas) {  
    var image = new Image();  
    image.src = canvas.toDataURL("image/png");  
    return image;  
}  
</script>


</body>


</html>
3

 

yjaspire
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5基础入门教程之canvas绘制图形
m0_70646869的博客
05-10 700
moveTo(x,y) moveTo()方法用于定位绘画的位置，即将点移动到参数x,y所指定的坐标位置。 canvas初始化或者调用了beginPath()方法时，绘画开始的位置即原点(0,0)，使用moveTo()方法，我们可以将起始位置移动到任何我们想要的地方。 moveTo()的使用实例： function draw(){ var canvas=document.getElementById(‘test_moveTo’); if(canvas.getContext){ var cxt=canvas.
html5的canvas绘制线条，moveTo和lineTo详解
王业楼的个人博客
11-08 6178
今天在看html5，里面新增的属性有一个canvas，它相当于一个画布你可以用js在里面画你想要的效果！我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚，尤其是moveTo和lineTo函数没有说的很明白！所以特地在这里与新手朋友分享一下我的理解！     一、w3c里面的代码和实现效果     手册的代码是这样的
canvas的基本使用
jingde528的博客
11-09 1665
canvas的基本使用
用HTML5做的给图画选画笔填充颜色的画板程序
09-12
用HTML5做的，给一个没有颜色的小鸭子填充颜色，可选择不同颜色画笔，选择橡皮擦等，demo可用，并有博客可供参考！
在canvas上一些常见属性
qq_30668579的博客
10-14 1394
以绘制矩形为例 绘制一个只有边框的矩形： var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.strokeStyle = "blue"; cxt.rect(20,10,150,75); cxt.stroke(); c.getContext("2d
详解HTML5 canvas绘图基本使用方法
09-28
主要介绍了详解HTML5 canvas绘图基本使用方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用HTML5canvas进行Web绘图
02-26
HTML5canvas元素的出现填补了这种不足，开发人员可以使用JavaScript脚本语言在canvas中进行一系列基于命令的图形绘制操作，本文将通过讲解如何使用canvas元素进行基本绘图操作，以及完成简单的动画和用户交互任务，...
HTML5 canvas基本绘图之绘制曲线
09-27
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制曲线方法，感兴趣的小伙伴们可以参考一下
HTML5 canvas基本绘图之绘制阴影效果
09-28
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制阴影方法，感兴趣的小伙伴们可以参考一下
HTML5的CANVAS绘制线条，MOVETO和LINETO详解
weixin_34194702的博客
11-12 418
2019独角兽企业重金招聘Python工程师标准>>> ...
html5坦克大战中坦克移动代码。
little_newBee的博客
01-24 2517
看了韩顺平老师的html5公开课，照着写的，先写了坦克4个方向移动的代码。代码是自己写的，没有抄袭 Insert title here function hero(x,y,direct) { this.x=x; this.y=y; this.speed=2; this.direct=direct; this.moveUp=function
Canvas动画的实现——塔吊
玖尘的博客
01-09 3969
首页构建容器 &lt;canvas id="myArc" width="500" height="500"&gt;你的版本不支持canvas&lt;/canvas&gt; 注意：需要在页面或图像加载完成后进行初始化操作，在body标签里加上onload="initCanvas()" 2.对塔吊所需要调用的函数进行封装 var mCanvas; //声明Canvas对象;
h5学习笔记之canvas绘图（1）
qq_39773416的博客
08-27 321
一、canvas标签的说明 在设置cancas大小的时候，必须在标签内写，如果在css内写会发生变化 默认宽度300px，默认高度 150px 背景颜色红色 的一个长方形 <canvas width="" height="" id=""> 您的浏览器不支持canvas，请更换浏览器！ </canvas> 二、成功使用canvas绘图的前提 需要2d渲...
初学canvas
yangjiegreat的专栏
11-24 281
function getContext(id) { return document.getElementById(id).getContext('2d'); } function demo () { var cxt = getContext('canvas'); cxt.beginPath(); cxt.moveTo(70, 140); cxt.lineTo(140, 70)
Canvas常用语法详解
SeekerTime
04-19 931
Canvas是HTML5的新增标签，通过创建画布，在画布上创建任何想要的形状。 一、标签原型<canvas width="1000" height="1000" id="demo"> 您的浏览器版本太低，不支持HTML5新增的canvas标签！ </canvas> 使用js获取画布，并指定对象<script> var demo = document.getElementById
利用HTML5的canvas标签实现灰太狼图像的绘制
执笔写流年殇的博客
09-23 824
Canvas绘制的灰太狼 - 当前浏览器不支持canvas var d = document.getElementById('demo'); function funLoad(){        var cxt=d.getContext('2d') ;     cxt.beginPath() ;     cxt.lineWidth = 2 ;
html5初体验，canvas模拟window画图(还有未解决问题)
u012103056的专栏
10-23 926
本次代码编写， body{font-size:70%;font-family:verdana,helvetica,arial,sans-serif;} .colorTable div{width:30px;height:30px;float:left;border:2px solid;border-style: groove;} .red{background-color:red} .
HTML5画布如何设置字体颜色
热门推荐
flower_517的博客
03-25 1万+
在HTML5画布中我们可以使用fillStyle属性来设置文本的字体颜色，它可以接受一个颜色的代码值，比如#cc0000，也可以接受一个颜色的英文单词，比如red。下面我们就来了解一下，希望对大家有所帮助。 首先我们需要在HTML页面中使用canvas标签创建一个画布，设置其id值为myCanvas。 然后使用JavaScript在画布中绘制文本图形 1、获取到canvas控件 2、使用get...
HTML5canvas绘画灰太狼--恶搞
dczjn9698的博客
04-10 407
直接上源代码： <html> </body> <div id='d' style="position:absolute;left:10px;top:20px;width:200px;height:50px;font-size:26px;"></div> <canvas id="demo" width="400" heigh...
html2canvas使用
最新发布
09-15
html2canvas是一个JavaScript库，用于在用户的浏览器中将HTML元素转换为Canvas，并可以将其保存为图片。你可以使用以下基本语法来使用html2canvas： ```javascript html2canvas(element, options); ``` 其中，element代表要转换为Canvas的HTML元素，options是一个可选的参数对象，可以设置一些选项来定制转换的行为。 如果你想将Canvas转换为图片地址，可以在options中使用onrendered回调函数，在回调函数中使用canvas.toDataURL()方法获取图片地址，例如： ```javascript html2canvas(document.body, { onrendered: function(canvas) { var url = canvas.toDataURL(); // 图片地址 document.body.appendChild(canvas); }, width: 300, height: 300 }); ``` 你可以通过以下两种方式来安装html2canvas库： 1. 使用es6模块化引入方式，通过npm或yarn安装html2canvas： ``` npm install --save html2canvas ``` 或者 ``` yarn add html2canvas ``` 2. 使用js直引方式，在HTML文件中引入html2canvas.js脚本： ```html <script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script> ``` html2canvas可以实现在用户浏览器端直接对整个或部分页面进行截屏。它会将页面渲染成一个canvas图片，并将不同的样式应用到这些元素上实现截屏功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值