HTML5 Canvas 画图标签、画线、圆、渐变色

最新推荐文章于 2022-01-09 19:30:36 发布

rugaxm

最新推荐文章于 2022-01-09 19:30:36 发布

阅读量1.4k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/rugaxm/article/details/8668694

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html> 
 
 < 
 head 
 > 
 
 < 
 meta  
 charset 
 = 
 utf 
 -8> 
 
 < 
 title 
 >PHP100 HTML5视频教程-canvas</ 
 title 
 > 
 
 < 
 script 
 src 
 = 
 "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" 
 ></ 
 script 
 > 
 
 </ 
 head 
 > 
 
 < 
 body 
 > 
 
 < 
 canvas  
 id 
 = 
 "mycanvas"  
 width 
 = 
 "500"  
 height 
 = 
 "500" 
 
 onmousemove 
 = 
 "mousexy(event)" 
 ></ 
 canvas 
 > 
 
 < 
 div  
 id 
 = 
 "ds" 
 ></ 
 div 
 > 
 
 < 
 script  
 type 
 = 
 "text/javascript" 
 > 
 
 var c=document.getElementById("mycanvas"); 
 
 var p100=c.getContext("2d"); 
 
 p100.fillStyle="#FF0000"; //定义颜色 
 
 p100.fillRect(0,0,300,300); //定义矩形的大小 
 
 p100.fillStyle="rgba(0,0,255,0.5)"; //定义颜色，支持透明 
 
 p100.fillRect(200,200,500,500); //定义矩形大小 
 
 //========线====== 
 
 p100.moveTo(10,10); //起始位置 
 
 p100.lineTo(150,50); //终止位置 
 
 p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画 
 
 p100.stroke(); //结束图形 
 
 //=======圆======= 
 
 p100.fillStyle="blue"; //定义演示 
 
 p100.beginPath(); //从新开始画，防止冲突重叠 
 
 //x坐标，y坐标，直径，Math.PI是圆周率 
 
 p100.arc(200,200,30,0,Math.PI*2,true); 
 
 p100.closePath(); //结束画布，防止冲突重叠 
 
 p100.fill(); //结束渲染 
 
 //======颜色渐变==== 
 
 //颜色渐变的起始坐标和终点坐标 
 
 var grd=p100.createLinearGradient(100,100,175,50); 
 
 //0表示起点..0.1 0.2 ...1表示终点，配置颜色 
 
 grd.addColorStop(0,"yellow"); 
 
 grd.addColorStop(1,"blue"); 
 
 p100.fillStyle=grd; //生成的颜色块赋值给样式 
 
 p100.fillRect(100,100,175,50); //设置色块 
 
 //=======图形载入===== 
 
 var img=new Image() 
 
 img.src="logo.png" 
 
 p100.drawImage(img,220,30); 
 
 //监视鼠标 
 
 function mousexy(n){ 
 
 x=n.clientX; 
 
 y=n.clientY; 
 
 $("#ds").html("坐标: x轴"+x+" y轴"+y); 
 
 } 
 
 </ 
 script 
 > 
 
 </ 
 body 
 > 
 
 </ 
 html 
 >

rugaxm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas 画图标签、画线、圆、渐变色

<!DOCTYPE html>head>meta charset=utf-8>title>PHP100 HTML5视频教程-canvastitle>scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">script>head>body>c
复制链接

扫一扫