?//在給定的矩形內清除指定的像素
//語法：context.clearRect(x,y,width,height)
//參數：要清除的矩形左上角的 x，y 坐標,以及寬與高,單位是像素?
// 加載圖片
var gravel = new Image();
gravel.src = "gravel.jpg";?

// 保存當前狀態
context.save();
// 字號為60,字體為Impact
context.font = "60px impact";

//填充顏色
context.fillStyle = '#996600';

//居中
context.textAlign = 'center';

// 顏色黑色，20%透明度
// 向右移動15px,向左移動10px
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;

// 將第二圖的高寬放大到原來的2倍
context.scale(2, 2);

// 輕微模糊陰影
context.shadowBlur = 2;
context.shadowColor = 'rgba(0, 0, 0, 0.2)';

//繪制文本
context.fillText('Happy Trails!', 200, 60, 400);

// 恢復之前的canvas狀態
context.restore();

下面是一些具體寫法


????創建畫布
?????<canvas width="1000px" height="600px" id="canvas">不支持canvas</canvas>
????
????<script>
????function $(id){
????return document.getElementById(id)
????}
????var canvas=$("canvas")
????var context=canvas.getContext("2d")//畫筆
????
????
????//填充
????fillRect()；調用函數
????function fillRect(){
????//context.fillStyle="rgb(255 0 255)"//填充顏色
????context.fillStyle="red";

????context.fillRect(20,10,100,100)???????//x、y、width、height
????}

????//設置陰影
????setShadow();
????function setShadow(){
????context.fillStyle="blue";
????context.shadowColor="red"//顏色
????context.shadowBlur="30"//模糊級數
????context.shadowOffsetX=10;//方向
????context.shadowOffsetY=10;
????context.fillRect(130,10,100,100)
????
????
????}
????//畫空白框
????drawStrokeRect()
????function drawStrokeRect(){
????context.strokeStyle = "blue";//顏色
????context.lineWidth = 2;//border寬度
????context.strokeRect(x,y,width,height);//xy左上點坐標，矩形寬長
????}
????//設置漸變
????var grd;
????setGradinet()
????function setGradinet(){
????grd = context.createLinearGradient(10,0,210,0);//x0,y0漸變開始點坐標,x1,y1結束點坐標
????grd.addColorStop(0,"rgb(255,0,255)");
????grd.addColorStop(1,"white");
????//同心圓
?????/* grd = context.createRadialGradient(80,160,20,80,160,50);//x0,y0,r0,x1,y1,r1兩圓不相交
?????grd.addColorStop(0,"rgb(255,0,255)");//第一個圓，0表示圓的位置
?????grd.addColorStop(1,"white");//第二個圓，1表示圓的位置
????*/
????context.fillStyle=grd;
????context.fillRect(10,130,150,100)
????
????}??
????</script>

轉載于:https://www.cnblogs.com/zengjie123/p/4641519.html

總結

以上是生活随笔為你收集整理的关于canvas的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。